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
HTML fixed background code is generated by applying the CSS
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:
HTML fixed background code can also be generated by applying the CSS
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
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.
Enjoy this page?
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!