Skip to main content

Forums

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #239472
    zantafio
    Participant

    hello there,

    i would like to have a fixed image as the backdrop to my site.
    as i found out ( like so many others before me ) this does not work correctly on chrome on android:
    http://codepen.io/anon/pen/xVgQBe

    unless i use the overflow-x: hidden; on the body, html ( uncomment it in the codepen example )
    but then the performance is much much worse …

    any other ideas, on what i could try?

    #239488
    Robby
    Participant

    Yeah background attachment fixed is so laggy. Try it like this:

    https://codepen.io/sitechop/pen/QNdXbE

    So basically we move the background to its own div. With position: fixed, and z-index: -1;

    #239494
    zantafio
    Participant

    Thanks a Million!

    One remaining problem though.
    I’d like to offset the content-y to 100vh by adding:

    <div class="content">
        <div class="scroller">
    

    and then in style

    .content{
        margin-top:100vh;
    }
    

    but that gives me a white background over the image

    See:
    http://codepen.io/anon/pen/dMNxPo

    the other option would be tp have an empty div with height:100vh before the content like so:
    http://codepen.io/anon/pen/XdpvJO

    Is that hacky or ok?
    Thanks again!

    #239506
    Robby
    Participant

    Do this on .content:

    box-sizing: border-box;
    padding-top: 100vh;

    Another option would be to absolutely position .content:

    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;

    #239508
    zantafio
    Participant

    Thanks another million! :D

    Out of curiosity and since I am focussing on performance:
    Is there any difference in terms of performance with one of these?

    thanks!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.