HTML Fixed Background

This article provides HTML fixed background code - code for fixing the background image of an HTML element so that it doesn't scroll when the document scrolls.

To fix the position of a background image, use the CSS background-attachment property.

Example:

Shorthand Code

You can use the CSS background tag to set all the background properties at once. Therefore, using the previous code example, we could rewrite it to this:

Example:

About background-attachment:local

The above examples use CSS2 to fix the background image. You may have noticed that these images are fixed based on the browser. In other words, when you scroll using the browser's scrollbars, you can see that the background image stays where it is. It's as though you're looking through a window at the background image, and when you scroll the document, you reveal another part of the background image.

CSS3 provides for a value that allows you to fix the background to its containing block (as opposed to the document). If you want the background image to stay fixed within the container as you scroll the container, use the local value.

At the time of writing, browser support for this value was limited/non-existent. However, if your browser supports this value, you should see the effect in the following example.