Backgrounds not rendering correctly in Chrome

Question

Or not rendering at all, I should say...

http://samnorris.co.nz

testing in Version 34.0.1847.131, two of my fixed background sections are not displaying, for example:

No idea what I've done that Chrome doesn't like - not a big user of Chrome actually (I'm a Firefox man), although I realize that's no excuse for a web designer! Works fine in Firefox.

Is it that the multiple backgrounds technique is not compatible with Chrome or something? (as I just realized only these two sections use it)

I checked to see it wasn't something stupid like an AdBlock plugin blocking something from loading, but that doesn't appear to be the case..

.spacesuit-bg and .interact-bg are the two culprits, both with somewhat similar CSS...

.spacesuit-bg {
    background: url("../img/spacesuit-bg.jpg") no-repeat 0 0;   
    color: #fff;
    height: 680px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transform: translate3d(0,0,0);
    display: block;
}

.multiplebgs .spacesuit-bg {
    background-image: url("../img/tech-seperator.png"), url("../img/tech-seperator-bottom.png"), url("../img/spacesuit-bg.jpg");
    background-position: 0 0, 0 bottom, center bottom;
    background-repeat: repeat-x, repeat-x, no-repeat;
    -webkit-background-size:auto auto, auto auto, !important;
    -moz-background-size:auto auto, auto auto, cover!important;
    -o-background-size:auto auto, auto auto, !important;
    background-size:auto auto, auto auto, cover !important;
}


@media only screen and (min-width: 1200px) {
    .spacesuit-bg {
        -moz-background-size:cover;
        background-size:cover;
    }
}
@media only screen and (min-width:1240px) {
    .spacesuit-bg {
        background-attachment: scroll, scroll, fixed;
    /*    min-height: 800px; */
    }
}
@media only screen and (min-width:2503px) {
    .spacesuit-bg {
        -webkit-background-size:auto auto, auto auto,;
        -moz-background-size:auto auto, auto auto, cover;
        -o-background-size:auto auto, auto auto,;
        background-size:auto auto, auto auto, cover;
        max-height: 0;
        padding: 400px 0;
    }
}

Second background-less section:

.interact-bg {
    background: transparent url("../img/interact-bg.jpg") no-repeat 0 0;    
    color: #fff;
    display: table;
    max-height: 980px;
    padding: 20% 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    -webkit-transform: translate3d(0,0,0);  
}
.multiplebgs .interact-bg {
    background-image: url("../img/interact-seperator.png"), url("../img/interact-seperator-bottom.png"), url("../img/interact-bg.jpg");
    background-position: 0 0, 0 bottom, center bottom;
    background-repeat: repeat-x, repeat-x, no-repeat;
    background-size: auto auto, auto auto, cover!important;
}


@media only screen and (min-width: 1200px) {
    .interact-bg {
        background-size: cover;
    }
}
@media only screen and (min-width:1240px) {
    .interact-bg {
        background-attachment: scroll, scroll, fixed;
    }
}
@media only screen and (min-width:2503px) {
    .interact-bg {
        background-size: auto auto, auto auto, cover;
        max-height: 0;
        padding: 400px 0;
    }
}

.interact-wrapper {
    width: 100%;
}

.interact-wrapper:before { 
    /* this is the important part */ 
    content: ''; 
    display: inline-block; 
    width: 0; 
    height: 100%; 
    vertical-align: middle; 
    /* this just takes care of whitespace added by having display:inline-block (there are other methods) */ 
    margin-left: -0.25em; 
}

Answer 1

The problem is the background-attachement property (for my browser width that would be:

@media only screen and (min-width:1240px) {
.interact-bg {
    background-attachment: scroll, scroll, fixed;
}

or more in detail the fixed value, as it fixes the background to the top left of the viewport (not element). Change fixed to scroll and you'll see the background (just to test it)