CSS Background

CSS background properties are used to define the background of HTML elements.

CSS properties define background effects:

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

Background color

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

The background color of a page is applied in the body selector:

Example

body {background-color:#b0c4de;}

Try it Yourself »

In CSS, color values are usually defined in the following ways:

Hexadecimal - e.g., "#ff0000"
RGB - e.g.: "rgb(255,0,0)"
Color name - such as: "red"

In the following examples, the h1, p, and div elements have different background colors:

Example

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Try it Yourself »

Background image

The background-image property describes the background image of an element.

By default, the background image is repeated (tiled) to cover the entire element entity.

Page background image setting example:

Example

body {background-image:url('paper.gif');}

Try it Yourself »

The following is an example of a poor text and background image combination. The text readability is poor:

Example

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

Try it Yourself »

Background image - tile horizontally or vertically

By default, the background-image property tiles in the horizontal and vertical direction of the page.

Some images look very inconsistent if tiled in both the horizontal and vertical direction, as shown below:

Example

body
{
background-image:url('gradient2.png');
}

Try it Yourself »

If the image is tiled only in the horizontal direction (repeat-x), the page background will be better:

Example

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

Try it Yourself »

Background image - set positioning and no tiling

Remark Make the background image not affect the layout of text

If you do not want the image to tile, you can use the background-repeat property:

Example

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

Try it Yourself »

In the above examples, the background image and text are displayed in the same position. To make the page layout more reasonable and not affect reading of the text, we can change the position of the image.

You can use the background-position property to change the position of the image in the background:

Example

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

Try it Yourself »

Background - shorthand property

In the above examples we can see that the page's background color is controlled through many attributes.

To simplify the code for these properties, we can combine them into a single property.

The shorthand property for background colors is "background":

Example

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Try it Yourself »

When using the shorthand property, the order of property values is:

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

You do not need to use all of the above properties; you can use them according to the actual needs of the page.

This example uses previously introduced CSS. You can view the corresponding examples:CSS Examples

More Examples

How to set a fixed background image
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.

CSS background properties

Property	Description
background	The shorthand property is used to set background properties in one declaration.
background-attachment	Whether the background image is fixed or scrolls with the rest of the page.
background-color	Sets the background color of an element.
background-image	Sets an image as the background.
background-position	Sets the starting position of the background image.
background-repeat	Sets whether and how the background image repeats.

other extensions