Tutorials: Backgrounds with CSS

Single Image Background

How is the best way to apply a single image as a background using CSS?

You can apply a single image background to any tag that is capable, such as divs, tables, etc using CSS. This example will show how to apply a single image background to the entire page. The best way apply the background is to use the body tag, making the body or background the first “layer” in your design.


The image being used

The body tag would have the following properties:

body {
background-image:url(fantasy_football_background.jpg);
background-position:top center;
background-repeat:repeat-x;}

See the example here

The repeat property is currently set to “repeat-x”, which will repeat the background horizontally. Depending on the image you are using, you may set repeat to “repeat- x” (vertical) or both, “repeat”.

Gradient Image Background

You can apply a gradient background to any tag that is capable, such as divs, tables, etc. Like the single image background, gradients are applied the same way. The nice thing about gradients, you don’t always have to have a large image. Using Photoshop or any other graphic software, you can create a small gradient image and just repeat it.

For this example, we will use the following gradient image:

The body tag will have the following properties:

body {
background-image:url(images/fantasy_football_background.jpg);
background-repeat:repeat-x;
background-position: top;}

See the example here

You can also create a gradient that is horizontal and repeat it going down your page. Instead of using “repeat-x” you would use “repeat-y”.

Repeating Image Background

You can apply a repeating background to any tag that is capable, such as divs, tables, etc. The repeating background is easier to apply than the gradients or single image backgrounds.  You don’t have to specify a position.

The repeating image being used

body {
background-image:url(/images/dark_grey_repeat.jpg);
background-repeat:repeat;}

See the example here