CSS. Background property

The following article will help you to get acquainted with the background properties in CSS. They are usually used to define the element background appearance.

There are several CSS properties used for background effects:

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

As any other style property background can be assigned to the tag, class or ID.

Background-color

The background-color property specifies the background color of an element.

	div.block{
		background-color:#64a8d8;
		}

Color is usually specified by:

• a HEX value – like “#ff0000”
• an RGB value – like “rgb(255,0,0)”
• a color name – like “red”

Background-image

The background-image property defines an image to use as background for element.

	div.block{
		background-image:url(image-1.jpg);
		}

Background-repeat

By default the background image is repeated to fully match the element. In other words if your image is 100px width and height and the element is 200px width and height – the background image will be repeated 4 times.

To avoid this behaviour use the background-repeat property.

	div.block-2{
		background-image:url(image-1.jpg);
		background-repeat: repeat-x;
		}

You can use the following property values:

• repeat-x – to repeat image horizontally
• repeat-y – to repeat image vertically
• no-repeat – to disable image repeat

Background-attachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

• scroll – the background scrolls with the page
• fixed – the background is fixed and doesn’t scroll

Background-position

The background-position property defines the initial background image position according to the element. By default the background image is put into the top left corner.

	div.block-3{
		background-image:url(image-1.jpg);
		background-repeat: no-repeat;
		background-position: 40px 40px;
		}

The fist value of the background-position property is left offset, the second – vertical one.

You can also define the values in percent (background-position: 100% 0%;) or using text values (background-position: top right;). For example the bottom right corner can be defined the following ways (the element dimensions are 100px/100px):

	background-position: right bottom;

	background-position: 100% 100%;

	background-position: 100px 100px;

Shorthand property

As you may know the more symbols you type in the CSS file the more is the size of the CSS file. Big CSS files may even slow down the website loading speed. So the shorter is your code – the better.

We recommend you to use the following format of the background property:

if you are using the background color:

	div.block-3{
		background:#64a8d8;
		}

if you are using the background image:

	div.block-3{
		background:url(image-1.jpg) top left no-repeat scroll; 
		}