Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Backgrounds and Borders Background Properties

Brad Lacke
Brad Lacke
7,438 Points

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.

Brad Lacke
Brad Lacke
7,438 Points

Background-attachment: local; isn't working either. No matter what I set the value to, the background image scrolls with the page. I'm hoping there's something weird in my code somewhere, this is kind of frustrating. I should note that I'm in chrome.

2 Answers

Try this:

body {
  background: url()  no-repeat fixed 100%;

You have to fix it to the body or maybe html. Otherwise it is fixed in relation to its container. Your code fixes it to the .fixed class, but not to the site as a whole (unless it is applied to the body).

German Tsatsura
German Tsatsura
8,978 Points

its a chrome 67 issue. everything was working fine till I updated chrome. So far there are no issues with safari or firefox.

Currently I have found 2 fixes.

Change the position of your element with the fixed background image.

or add

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);