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.

Example Code

<!-- Codes by HTMLmagics -->
<div style="background-color:#ffffff;background-image:url(http://htmlmagics.blogspot.com/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://htmlmagics.blogspot.com/backgrounds/fixed-background.cfm">Fixed Background</a></p>

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.

Fixed Background Code

The quickest HTML code for applying a fixed background (and other background effects) is the background property.

Example Code

<!-- Codes by HTMLmagics -->
<div style="background:#fff url(http://htmlmagics.blogspot.com/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://htmlmagics.blogspot.com/backgrounds/fixed-background.cfm">Fixed Background</a></p>

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.

Short-hand Version - Quicker

Doing this saves you from typing out each specific property.

Example Code

<!-- Codes by HTMLmagic -->
<div style="background:url('http://htmlmagics.blogspot.com/images/backgrounds/background-image-3.gif') no-repeat bottom right;color:blue;font-size:14px;width:300px;height:200px">This div tag has got a background image. You could also apply a background image to the whole page if you like.</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/backgrounds/html-background-image.cfm">HTML background image</a></p>

Result

This div tag has got a background image. You could also apply a background image to the whole page if you like.

HTML background image

Explicit Version

This version uses the explicit properties.

Example Code

<!-- Codes by HTMLmagics -->
<div style="background-image:url('http://htmlmagics.blogspot.com/images/backgrounds/background-image-3.gif');background-repeat:no-repeat;background-position:bottom right;color:blue;font-size:14px;width:300px;height:200px">This div tag has got a background image. You could also apply a background image to the whole page if you like.</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/backgrounds/html-background-image.cfm">HTML background image</a></p>

 

Result

This div tag has got a background image repeating horizontally. You could also apply a background image to the whole page if you like.

HTML Background Image Code

This example code applies a background image to an HTML div tag using the background-image property.

Example Code

<!-- Codes by HTMLmagics -->
<div style="background-image:url('http://htmlmagics.blogspot.com/images/backgrounds/background-image-2.gif');color:blue;font-size:14px;width:300px;height:200px">This div tag has got a background image. You could also apply a background image to the whole page if you like.</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com/backgrounds/html-background-image.cfm">HTML background image</a></p>

 

 

Result

 

This div tag has got a background image. You could also apply a background image to the whole page if you like.

HTML Background Color Code

This example code applies a background color to a p tag using the background-color property.

Example Code

<!-- Codes by HTMLmagics -->
<p style="background-color:#0f0;color:black;width:200px;">This text has got a background color applied. You could also apply background color to the whole page if you like.</p>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com
/backgrounds/html-background-color.cfm">HTML background color</a></p>

 

 

Result

This text has got a background color applied. You could also apply background color to the whole page if you like.

HTML Background Code

The source code (on the left) results in the HTML background (on the right).

Example Code

<!-- Codes by HTMLmagics -->
<div style="background:#eee url(http://htmlmagics.blogspot.com//images/backgrounds/background-image-2.gif) repeat fixed;
        overflow:scroll;
        width:200px;
        height:100px;
        border:1px solid black;">
<p>This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p>
</div>
<p><a  style="font-size:11px;color:#999;" href="http://htmlmagics.blogspot.com//backgrounds/">Backgrounds</a></p>

 

Result

 

This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.