HTML Background Code

This article provides HTML background code - code for setting the background properties of an HTML element.

HTML Background Code (deprecated)

HTML is very limited for setting backgrounds. You can only specify a background image on the body tag and setting a background color is limted to the document's body and tables.

To set the background properties for your page in HTML, do something like this:

The HTML background code is deprecated (i.e. not recommended), so you're better off using CSS to set background properties.

The CSS Method (recommended)

CSS provides you with more options for setting your background. You can set background properties on any element, plus you can do things like, specify an image's position, whether it should repeat, how it should repeat etc.

Background Color

You can set the background color of any HTML element using the background-color property:

<div style="background-color:red;width:200px;">
HTML background code is limited, CSS background code is much better!
</div>

This results in:

Background Image

You can set a background image like this:

<div style="background-image:url(/pix/smile.gif);
		background-repeat:repeat;
		width:200px;
		height:200px;">
</div>

This results in:

Fixed Background Image

You can fix the position of a background image so that its position is fixed even if it's containing block scrolls. You do this with the background-attachment property:

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

This results in:

Shorthand Background Code

CSS provides the following properties for setting the background on HTML elements: background-attachment, background-color, background-image, background-position, background-repeat.

You can use the CSS background property to set all the background properties at once. Therefore, using the previous code example, we could rewrite it to this:

<div style="background:url(/pix/smile.gif) repeat fixed;
		overflow:scroll;
		width:200px;
		height:100px;">
HTML background code is limited, CSS background code is much better!
example shows how a background image can be set to a fixed position
- even though its containing block scrolls.</div>