This method uses the
<!-- 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>
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.