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:

CodeResult

HTML fixed background code is generated by applying the CSS background-attachment property against an HTML element. When the document scrolls, the background image stays fixed in the same position.

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:

CodeResult

HTML fixed background code can also be generated by applying the CSS background shorthand property against an HTML element. When the document scrolls, the background image stays fixed in the same position.

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.

CodeResult

HTML fixed background code can be generated by applying the CSS background property or the background-attachment property against an HTML element. When the div scrolls, the background image stays fixed in the same position.

Enjoy this page?

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
ZappyHost Banner Ad