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.