Working with Backgrounds

In this tutorial, you will learn about background properties and its usage, following background properties are used in CSS

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

background-color
Using background-color property you can change background colour for an HTML element. For example:

p{

background-color:red;

}

body{

background-color:00ffcc;

}

background-image
Using background-image property you can change background image. For example:

p{

background-image:url(images/bg.gif);

}

body{

background-image:url(images/bg1.gif);

}

background-repeat
Valid values are: repeat, repeat-x, repeat-y, and no-repeat. A value of repeat, repeats the background horizontally and vertically. repeat-x only repeats the background in the horizontal direction, repeat-y vertical direction. And as you might have thought no-repeat does not repeat the background at all.

Code	Description
background-repeat: repeat	This is the default setting. Tiles the image both horizontally and vertically.
background-repeat: repeat-x	Tiles the image in the horizontal direction only. Good if you want the background running across the top of the page.
background-repeat: repeat-y	Tiles the image in the vertical direction only. Great for left-hand page borders!
background-repeat: no-repeat	No repeating takes place; only one copy of the image is displayed. This is good if you want to use a big image that isn't designed to tile.

background-attachment
There are two values for background-attachment, scroll and fixed. A valid you of scroll is what is common with browsers today. The background scrolls along as you do. A value of fixed will keep the background fixed, with the text and other goodies scrolling on top of it.

background-position
Background positioning is done by entering a value for the left position and top position separated by a space.

Setting multiple background values