Backgrounds In CSS: Everything You Need To Know

Background attachment
The background-attachment property determines what happens to an image when the user scrolls the page. The three available properties are scroll, fixed and inherit. Inherit simply tells the element to follow the background-attachment property of its parent.

To understand background-attachment properly, we need to first think of how the page and view port interact. The view port is the section of your browser that displays the Web page (think of it like your browser but without all the toolbars). The view port is set in its position and never moves.

When you scroll down a Web page, the view port does not move. Instead, the content of the page scrolls upward. This makes it seem as if the view port is scrolling down the page. Now, when we set background-attachment:scroll;, we are telling the background that when the element scrolls, the background must scroll with it. In simpler terms, the background sticks to the element. This is the default setting for background-attachment.

Let’s see an example to make it clearer:

background-image: url(test-image.jpg);

background-position: 0 0;
background-repeat: no-repeat;
background-attachment: scroll;

As we scroll down the page, the background scrolls up until it disappears.

But when we set the background-attachment to fixed, we are telling the browser that when the user scrolls down the page, the background should stay fixed where it is — i.e. not scroll with the content.

Let’s illustrate this with another example:

background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;

We have scrolled down the page here, but the image remains visible.

The important thing to note however is that the background image only appears in areas where its parent element reaches. Even though the image is positioned relative to the view port, it will not appear if it’s parent element is not visible. This can be shown with another example. In this one, we have aligned the image to the bottom-left of the view port. But only the area of the image inside the element is visible.

background-image: url(test-image.jpg);
background-position: 0 100%;
background-repeat: no-repeat;
background-attachment: fixed;

Part of the image has been cut off because it begins outside of the element.

The Background Shorthand Property
Instead of writing out all of these rules each time, we can combine them into a single rule. It takes the following format:

background: <color> <image> <position> <attachment> <repeat>

For example, the following rules...

background-color: transparent;
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment: scroll;
background-repeat: repeat-y;

... could be combined into the following single line:

background: transparent url(image.jpg) 50% 0 scroll repeat-y;

And you don’t have to specify every value. If you leave a property out, its default value is used instead. For example, the line above has the same output as:

background: url(image.jpg) 50% 0 repeat-y;