Fixed Background
This page contains HTML fixed background code. Feel free to copy and paste the fixed background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.
Also, please consider keeping the link back to this website - if you do it will be very much appreciated!
Fixed Background Code
Here are two alternative methods for fixing the background image. The first method (shorthand), is the quickest and easiest. The second method requires more typing, but can sometimes be easier for a beginner to remember.
Be assured that both methods acheive the same result - it's simply up to you which one you choose.
Shorthand Code
The quickest HTML code for applying a fixed background (and other background effects) is the background
property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The background
property is a shorthand property for setting all background properties at once.
Source Code | Result |
---|---|
This example sets the fixed background image with one property - the 'background' property. This keeps the code shorter and easier to read. Here, we also use 'overflow:scroll' to ensure that the 'div' scrolls when the contents don't fit into it. |
Explicit Code
This method uses the background-image
property in conjunction with the background-attachment
property (i.e. background-attachmen:fixed
). Plus we've also thrown in the background-color
property for good measure.
Source Code | Result |
---|---|
This example sets the fixed background image with the 'background-image' and 'background-attachment' properties. As with the shorthand version, we also use 'overflow:scroll' to ensure that the 'div' scrolls when the contents don't fit into it. |
Page Background
To set the fixed background against the whole page, simply apply the background
property against the body
tag.
Here's an example.
Example code: