Forums

Give help. Get help.

  • mqn
    # May 27, 2014 at 5:50 pm

    sure..would love any solve to this..

    # October 13, 2014 at 8:08 am

    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.

    # October 15, 2014 at 12:14 pm

    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

    # November 22, 2014 at 7:41 am

    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…

    # November 22, 2014 at 9:57 am

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

    # December 26, 2014 at 4:16 pm

    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

    # December 26, 2014 at 6:01 pm

    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.

    # June 10, 2015 at 4:26 pm

    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.

    # June 15, 2015 at 6:15 am

    Yeah,given that the screen size of iOS devices.

    # August 12, 2015 at 5:04 pm

    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!

    # August 12, 2015 at 5:05 pm

    Perfect! Thanks Very Much Sir!

    # August 13, 2015 at 7:30 pm

    I created a pen that illustrates a solution to this problem in Bootstrap… (http://codepen.io/j_holtslander/pen/RPOJVj)

    # August 13, 2015 at 8:38 pm

    This one’s had more lives than a cat, some of which identical or far from a solution to the original question.

    Anyway… for those who choose the fixed div approach, adding the following to the CSS will make this less detrimental to screen repaints (apparently also the reason background-attachment: fixed doesn’t work in the first place) :

    #backdiv {
    -webkit-backface-visibility: hidden;
    }
    

    Or even on webkit related desktop browsers for that matter.

    # August 15, 2015 at 11:18 am

    Thanks! It solved my issue :)

    # November 1, 2015 at 3:36 pm

    Height 100vh fixed this for me

    #wrapper {
    background: url(“image”)
    no-repeat center center fixed !important;
    background-size: cover !important;
    height: 100vh !important;
    overflow: hidden !important;
    }

    #main {
    height:100vh !important;
    overflow: scroll !important;
    -webkit-overflow-scrolling: touch !important;

    }

Viewing 15 posts - 31 through 45 (of 51 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag