Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Viewing 15 posts - 31 through 45 (of 57 total)
  • Author
    Posts
  • #169444
    terraling
    Participant

    @photocurio – I think you meant position:fixed not position:absolute for .background-div otherwise it scrolls with the rest of the content.

    Also, I’m not sure you even need that img, you can use a background-image with cover on your div.background-div. Cover works because you’ve solved the problem of the size of the container being the display viewport not the size of the whole page including off-screen content.

    #171187
    mqn
    Participant

    I too am looking for a solution..

    http://www.qndesign.com

    does not work on ipad or phone..any suggestions besides scrapping it all?

    #171188
    nixnerd
    Participant

    Ahhh! You found it! Let’s see if @TheDoc has any more suggestions on this or if it was ever figured out.

    It’s marked [Solved] is it not?

    #171194
    mqn
    Participant

    Hi sorry,
    This thread seems to have been solved can someone tell me what I’m doing wrong.. I did @k00ka solve but it does not seem to be working..only applied to first image, the rest are original code. Can someone tell me what I”m doing wrong? its fine on the desketop but not on phone or ipads.

    http://www.qndesign.com

    sorry i’m a self taught hack. : (

    #171195
    nixnerd
    Participant

    sorry i’m a self taught hack. : (

    We all are ;)

    Hey, there’s no telling if @k00ka is still around here. Maybe… maybe not. People leave all the time. Is there any way you could create a Codepen for this so we can all play with it? Thanks!!!

    #171204
    mqn
    Participant

    sure..would love any solve to this..

    https://gist.github.com/anonymous/9a88ce1084c37e705381

    #186121
    tom_ano
    Participant

    Found this solution/tuto that works like a charm.
    https://ihatetomatoes.net/make-parallax-website-responsive/

    Also note that background-attachment: fixed; was the line generating erros on IOS
    so I keep the following standard:
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;

    and only do a media query for large screens:
    @media only screen and (min-width: 768px) {
    .bcg {

                        background-attachment: fixed;
                    }
            }
    

    Hope this helps someone.

    #186327
    Mikkel
    Participant

    I think I solved it.

    I didn´t do it with “html” – instead with a fixed “div”

    
    .bg {
            background: url(image.jpg);
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            height: 100%;
            width: 100%;
            position: fixed;
            background-position: center center;
            background-repeat: no-repeat;
        }
    

    It works on desktop and mobile (iOS and Android) – I just use it on Media Query “max-with: 1024″…

    Hope that helps!

    Mikkel

    #188978
    Mary
    Participant

    This solved that problem for me too, thanks everyone!
    The only thing I notice on my iphone is when I scroll, the background-image gets a bit ‘jumpy’…is that normal or…

    #188981
    Mary
    Participant

    oh, that’s because of the bar at the bottom that disppaers after scroll offcourse, so…anyway, so happy I found this solution!

    #191664
    darylbennett
    Participant

    I’m still working on this, but I’m curious. What’s the best way to test this? I operate Linux and Windows, so I can test these across desktop Chrome, chromium, opera, IE, Mozilla, etc. I can publish it and see how it operates on my mobile (android and windows phone).

    I’ve tried the site testmobile.me to see how it appears there, but the background-size:cover shows normally there (when testing the Iphone).

    Is there a way that I can test these on the mobile accurately from my PC, because right now, altering the site and publishing it live seems ridiculous. From what I recall, I’ve tested it on Safari (from windows PC) successfully. so want to know what you all think is the best way to go forward w/ this debugging.

    cheers

    #191666
    Senff
    Participant

    Chrome has an mobile emulator built in, accessible through the inspector: http://www.marksenff.com/front-end/you-already-have-a-retina-screen-emulator/

    Still, always test on actual devices as well. Tools like Prepros have a built-in web server that enables you to access your local site on a phone or tablet or anything using your wifi network.

    #203556
    stacigh
    Participant

    I’m doing something similar. I have a div and a few children inside of it. I’m trying to apply a fixed position to a background image with a size of cover but because I’m using Modernizr I can detect for devices that are touch enabled:

    HTML:

    <div class="hero">
      ...
    </div>
    

    CSS:

    .hero {
      background-image: url('...');
      background-size: cover;
    }
    
    .no-touch .hero {
      background-attachment: fixed;
    }
    

    .no-touch is a class that Modernizr will append to the &lt;html&gt; tag if the device isn’t touch enabled.

    #203761
    pat35249
    Participant

    Yeah,given that the screen size of iOS devices.

    #206463
    Voolu
    Participant

    I was searching for a solution and read the comments and tried k00ka’s solution.

    It worked prefectly for me.
    I didn’t read on any further, there is probably an easier and more up to date method.

    Registered just now to thank k00ka. ^_^ Brilliant!

Viewing 15 posts - 31 through 45 (of 57 total)
  • The forum ‘CSS’ is closed to new topics and replies.