While CSS backgrounds arent anything new, they have become an integral part of the web build process as internet connections become faster and designs become more graphic-intensive.

The each CSS element (ID or Class) can have a single background attributed to it, and there are several properties that can be used to control the way the image is displayed. The ‘inherit’ property will display the settings of the parent CSS element:

CSS Background Properties

background-image:
Specify the location of the image you wish to use
.yourclass{background-image: url(image.jpg);}

background-position:
Options: Inherit, Top, Right, Bottom, Left, Center
Set where you want the image to be displayed. You can combine two e.g. ‘top left’.
.yourclass{background-repeat: bottom left;}

background-repeat:
Options: Inherit, Repeat, Repeat-X, Repeat-Y, No-Repeat
Set how you want to repeat the image. By default your browser will tile the image in both X and Y directions.
.yourclass{background-repeat: repeat-x;}

background-color:
Options: Inherit, Hex Values
Set the background colour of the HTML element.
.yourclass{background-color: #333333;}

Putting it all together

As you will have figured out when reading them, using this CSS code will make the background image (image.jpg) appear in the bottom left of your HTML element, will tile it horizontally and fill the remaining background grey (#333333).

Merging the CSS Background Properties

In order to reduce the size of your CSS file and make your code tidier you can compress the four properties listed above into a single line of code:

.yourclass{background: url(image.jpg) bottom left repeat-x #333333;}

This code will display in exactly the same way as the properties above but it is an easy way to save a lot of lines of code when you are dealing with a design featuring numerous background images.