Backgrounds

HTML and CSS provides many ways of changing backgrounds in web pages.

This page explains the industry standard way of creating backgrounds in HTML. Feel free to copy and paste the background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you like.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

HTML Background

The quickest HTML code for backgrounds is the background property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The background property is a shorthand property for setting all background properties at once.

Example Code

The source code (on the left) results in the HTML background (on the right).

Source Code	Result
<div style="background:#eee url(/images/backgrounds/background-image-2.gif) repeat fixed; overflow:scroll; width:200px; height:100px; border:1px solid black;"> <p>This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.</p> </div>	This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

Page Background

To set the background for the whole page, simply apply the background property against the body tag.

Example:

More Background Codes

You might find it easier to use the background codes that are specific to each function. For example, if you only want to set the background color, you can use the background-color property.

Check these out to see what I mean: