Fixed Background Code

You can use the background-attachment property to fix the position of a background image so that its position is fixed (even if it's containing block scrolls):


<div style="background-image:url(/images/smile.gif);

  background-repeat:repeat;

  background-attachment:fixed;

  overflow:scroll;

  width:200px;

  height:100px;">

This example shows how a background image can be set to a fixed position

- even though its containing block scrolls.

The contents of this box forces scroll bars to appear. When you scroll, you'll notice the image remains fixed.

</div>

This results in:

This example shows how a background image can be set to a fixed position

- even though its containing block scrolls.

The contents of this box forces scroll bars to appear. When you scroll, you'll notice the image remains fixed.

Shorthand Background Code

There's a quick way of setting all background properties of an HTML object. You can use the CSS background property to set all the background properties at once:


<div style="background:url(/images/smile.gif) repeat fixed;overflow:scroll;width:200px;height:100px;">

This box has had its all it's background properties set using the 'background' property. The background property is shorthand for setting many properties at once.

</div>

This results in:

This box has had its all it's background properties set using the 'background' property. The background property is shorthand for setting many properties at once.