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

<!-- Codes by HTMLcodes.me -->
            <div style="background:#fff url(http://www.htmlcodes.me/images/backgrounds/background-image-2.gif) repeat fixed;
            overflow:scroll;
            width:200px;
            height:100px;">
            <p>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.</p>
            </div>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/backgrounds/fixed-background.cfm">HTML Fixed Background</a></p>

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

<!-- Codes by HTMLcodes.me -->
            <div style="background-color:#ffffff;background-image:url(http://www.htmlcodes.me/images/backgrounds/background-image-2.gif);background-attachment:fixed;
            overflow:scroll;
            width:200px;
            height:100px;">
            <p>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.</p>
            </div>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/backgrounds/fixed-background.cfm">HTML Fixed Background</a></p>

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: