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

Home Forums CSS Chrome Only Loading Background Images in Viewport

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #167938
    Jeremy Englert

    I am attempting to create a website that has multiple 100% height divs. It functions great on all browsers except for Google Chrome.

    In Chrome, it only loads background images if they are in the viewport when the website initially loads.

    Here is the code I’m using for the 100% height divs.

    .home-module-3 {
        url("wp-content/themes/aquadopa/library/images/running-stance.jpg") no-repeat scroll center center / cover  rgba(0, 0, 0, 0) 
        background-attachment: fixed !important;
        height: 100vh;
        overflow: visible;
        padding: 20rem 0rem 10rem 0rem;     

    Demo Link:

    Any ideas? I can’t seem to track down the issue.


    Doesn’t seem likely that this is a CSS issue.

    More likely to be JS/JQ

    Jeremy Englert

    Oddly enough, I’m not using any JS/JQ for the full-height DIV. However, maybe a different element is causing the issue. Still digging around.

    Jeremy Englert

    The issue resolves itself when I remove the “background-attachment: fixed;” – is this not supported in Chrome?

    Jeremy Englert

    Shane, I’ll work on creating a test sample now.

    But from what I’ve been reading, it’s a known bug in Chrome (background: cover and background-attachment: fixed don’t play nicely together).

    I’ve found a couple of fixes, but none seem to be working for me. Let me work getting a reduced test example up.

    Jeremy Englert

    Oddly enough, it is working in this reduced test case. Comparing it to the live code to see where the hang-up is.

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