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 52 total)
  • Author
    Posts
  • #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!

    #206464
    Voolu
    Participant

    Perfect! Thanks Very Much Sir!

    #206523
    j_holtslander
    Participant

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

    #206525
    Shikkediel
    Participant

    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.

    #206582
    gardoku
    Participant

    Thanks! It solved my issue :)

    #210422
    neevypops
    Participant

    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 52 total)
  • The forum ‘CSS’ is closed to new topics and replies.