Learn how to build and design websites with our tutorials.

CSS and CSS3 Background Tutorial

View Tutorial Contents


CSS Background Properties

This tutorial will show you how to use CSS background properties to define the background effects of HTML elements. The CSS background properties are listed below.

There are two other CSS3 background properties that I will go over at a later date because web browsers do not fully support them at this moment. The CSS3 background properties are listed below.

CSS shorthand background property

CSS Background Shorthand Property

The shorthand background property allows you to specify the background property of an HTML element. You can also do it using specific background properties. If you use both, web browsers will still render the last CSS background property that is applied to an HTML element.

The order of the properties when using the shorthand background property should be:

You do not have specify every background property when using the shorthand property, however, the ones that are listed should be present in this order.

This tutorial will show you how to use both the CSS shorthand property and specific CSS background properties.


CSS Background Color

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

The first CSS example below shows you how to use the CSS shorthand property to specify the background color of the HTML body element.


body{
background: red;
} 

The following example shows you how to use the background-color property to specify a background color of the HTML body element.


body{
background-color: rgb(255,0,0);
} 

The following CSS example shows you how to apply a background color to level 1 headings.


h1{
background: #ff0000;
} 

The following CSS example shows you how to apply a background color to level 1 headings and paragraphs.


h1, p{
background: red;
} 

Colors In CSS

When specifying colors in CSS, the most common ways to do this is to use either the color name, RGB value or a HEX value.

Color Format Example
color name red
RGB value rgb(255,0,0)
HEX value #ff0000

CSS Background Images

The shorthand background property and the background-image property along with the url value allow you to specify an image to use as the background of an HTML element.

The CSS example below shows you how to use the shorthand background property to use an image as the background of an HTML element.


body{
background: url("image.jpg");
}

The CSS example below shows you how to use the background-image property to use an image as the background of an HTML element.


body{
background-image: url("image.jpg");
}

By default, the image will be repeated both horizontally and vertically over the whole web page unless you specify otherwise.


Repeating A Background Image Horizontally

The CSS example below shows you how to have a background image repeat horizontally using the shorthand background property.


body{
background: url("background-image.png") repeat-x;
}

The CSS example below shows you how to have a background image repeat horizontally using the background-image and the background-repeat properties.


body{
background-image: url("background-image.png");
background-repeat: repeat-x;
}


Repeating A Background Image Vertically

The CSS example below shows you how to have a background image repeat vertically using the shorthand background property.


body{
background: url("background-image.png") repeat-y;
}

The CSS example below shows you how to have a background image repeat vertically using the background-image and the background-repeat properties.


body{
background-image: url("background-image.png");
background-repeat: repeat-y;
}


Setting Background Image Once

The CSS shorthand background property and the CSS background-repeat property with a value of no-repeat is used to specify that a background image is displayed only once.

The CSS example below shows you how to use the background property to specify that a background image is displayed only once.


body{
background: url("background-image.png") no-repeat;
}

The CSS example below shows you how to use the background-repeat property to specify that a background image is displayed only once.


body{
background-image: url("background-image.png");
background-repeat: no-repeat;
}


CSS Background Image Position

The CSS shorthand background property and the background-position property allow you to position a background image.

The background-property can take a length value, a percentage value or any combination of the keywords top, bottom and center and also left, right and center. The initial values are 0% 0%;.

The CSS example below shows you how to position a background image using the shorthand background property using keywords.


body{
background: url("background-image.png") no-repeat right top;
}

The CSS example below shows you how to position a background image using the background-position property using keywords.


body{
background-image: url("background-image.png");
background-repeat: no-repeat;
background-position: right top
}

The CSS example below shows you how to position a background image using the shorthand background property using length values.


body{
background: url("background-image.png") no-repeat 10px 10px;
}

The CSS example below shows you how to position a background image using the background-position property using length values.


body{
background-image: url("background-image.png");
background-repeat: no-repeat;
background-position: 10px 10px;
}

The CSS example below shows you how to position a background image using the shorthand background property using percentage values.


body{
background: url("background-image.png") no-repeat 25% 50%;
}

The CSS example below shows you how to position a background image using the background-position property using percentage values.


body{
background-image: url("background-image.png");
background-repeat: no-repeat;
background-position: 25% 50%;
}