CSS Background

In this tutorial we will learn about CSS background property.

background-color

We use background-color property to set the background color of the element. The value of this property can be name of the color, color in hex form, color in rgb and rgba value.

Click here for CSS Color tutorial.

In the following example we have set the background color of the div to lightyellow.

div {
	background-color : lightyellow;
}

background-image

We use the background-image property to set background image of elements. By default, the image will be repeated to fill up the entire container.

The repeating of the background image is also known as tiling.

In the following example we are setting the background image of div.

div {
	background-image : url(/image/dyclassroom-logo-black-311x48.png);
}

background-repeat

We can control the repeating (tiling) of background image using the background-repeat property.

Different values for this property is listed below.

• repeat - default and makes the image repeat horizontally and vertically.
• repeat-x if we want only horizontal repeat.
• repeat-y if we want only vertical repeat.
• no-repeat if we don't want any repeat.

In the following example we are using repeat.

div {
	background-image : url(/image/dyclassroom-logo-black-311x48.png);
	background-repeat : repeat;
}

In the following example we are using repeat-x.

div {
	background-image : url(/image/dyclassroom-logo-black-311x48.png);
	background-repeat : repeat-x;
}

In the following example we are using repeat-y.

div {
	background-image : url(/image/dyclassroom-logo-black-311x48.png);
	background-repeat : repeat-y;
}

In the following example we are using no-repeat.

div {
	background-image : url(/image/dyclassroom-logo-black-311x48.png);
	background-repeat : no-repeat;
}

background-position

To control the position of the background image we use the background-position property.

List of values this property can take is given below.

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

We can also specify the exact position using x% y% or xpos ypos.

In the following example we are using center center.

div {
	background-image : url(/image/dyclassroom-logo-black-311x48.png);
	background-repeat : no-repeat;
	background-position : center center;
}

In the following example we are using 10% 20%.

div {
	background-image : url(/image/dyclassroom-logo-black-311x48.png);
	background-repeat : no-repeat;
	background-position : 10% 20%;
}

In the following example we are using 10px 50px.

div {
	background-image : url(/image/dyclassroom-logo-black-311x48.png);
	background-repeat : no-repeat;
	background-position : 10px 50px;
}

background-attachment

We use background-attachment property to make the background image either fixed or scrollable.

It takes two values - scroll (the default value) and fixed.

If the value is set to fixed then the image will not scroll with the rest of the content of the page.

Shorthand for background

We can combine the above background properties in the following manner.

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

div {
	background: lightyellow url(/image/dyclassroom-logo-black-311x48.png) scroll center center no-repeat;
}

So, in the above rule we have set:

• background-color = lightyellow
• background-image = url(/image/dyclassroom-logo-black-311x48.png)
• background-attachment = scroll
• background-position = center center
• background-repeat = no-repeat