Background-attachment: fixed doesn't work.

I'm in CSS Foundations - Background Properties and @11:00 Guil is discussing different background-attachment states and setting the value to "fixed" is not fixing the image in the browser, it's still scrolling along with the divs in their initial state. There's a separate page-styles.css file also called up by the html, I found that if I commented out in there the overflow property of the divs, fixed worked. But that's not really an option, and no other overflow value worked.

Here's the base code:

body {
    padding-bottom: 100px;
    background: #2A2A2A;
    color: #FFF;
    text-shadow: 0 1px #000;
    font: 1.1em/1.5 "Hevetica Neue" sans-serif;
}
h2 {
    margin: 0;
    font-size: 2em;
}
.box, .attch {
    box-sizing: border-box;
    margin: 40px auto;
    padding: 20px;
    width: 800px;
    height: 500px;
}
.scroll, .fixed, .local {
    overflow: auto;
    height: 400px;
    background-image: url('img/rain.jpg');
    background-repeat: no-repeat;
}

And here's my code (don't mind the Sass, or maybe do if that's the issue, but it's all up to spec in the actual css file)

box {
    background: {
        image: url(img/mike.png);
        color: #e4e4e4;
        repeat: no-repeat;
        position: center top;
    }
}


.fixed {
    background-attachment: fixed;
}

If anyone has an idea, please let me know.

EDIT: The background image being "fixed" does shift inside its container when the style is applied, so it looks different than the other divs; also, if I resize my viewport it does stay in place while the other divs' bg images move with the viewport; however, on scrolling it does nothing. The background moves in sync with the text and other elements on the page as if it had been set to background-attachment: scroll. So does the one set to local. Sorry for the info dump. Would love a little wisdom on this.