HTML Background Code

Here you can get the HTML background code for setting the background of your web page. For example, you an set the background color or specify a background image.

To set the HTML background, you actually use Cascading Style Sheets (CSS). You can set background properties on any HTML element, plus you can do things like, specify an image's position, whether it should repeat, how it should repeat etc.

Background Color

The background-color property allows you to set the background color for any HTML element:


<div style="background-color:lightgreen;width:150px;">

This box has had it's background set to the color blue.

</div>

This results in:

This box has had it's background set to the color blue.

Background Image

This code sets a background image:


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

  background-repeat:repeat;

  width:200px;

  height:200px;">

This box has a background image.

</div>

This results in:

This box has a background image.

Fixed Background Image

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.