CSS Background

The CSS background attribute is used to define the background of the HTML element.

CSS properties define background effects:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

Background Color

The background-color attribute defines the background color of the element.

The background color of the page is used in the body selector:

Example

body {background-color:#b0c4de;}

 Try It! 

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

• Hexadecimal-such as: "#ff0000"

• RGB-such as: "rgb(255,0,0)"

• Color name-e.g. "red"

In the following example, 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! 

Background Image

The background-image attribute describes the background image of the element.

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

Examples of page background image settings:

Example

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

 Try It! 

Below is an example of a bad combination of text and background image. Poor text readability:

Example

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

 Try It! 

Background Image - Tile horizontally or vertically

By default, the background-image property will be tiled horizontally or vertically on the page.

If some images are tiled in the horizontal and vertical directions, it looks very inconsistent, as shown below: 

Example

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

 Try It! 

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

Example

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

 Try It! 

Background Image - Set Positioning and Non-Tiling

 Let the background image does not affect the layout of the text.

If you don't want the image to be tiled, you can use the background-repeat property:

Example

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

 Try It! 

In the above example, the background image and the text are displayed in the same position. In order to make the page layout more reasonable and not affect the 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! 

Background - Shorthand Attributes

In the above example, we can see that the background color of the page is controlled by many attributes.

In order to simplify the code of these properties, we can combine these properties in the same property.

The shorthand property of the background color is "background":

Example

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

 Try It! 

When using shorthand attributes, the order of attribute values is:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

You don't need to use all the above attributes, you can use them according to the actual needs of the page.

This example uses the previously introduced CSS, you can check the corresponding example: CSS example

More Examples

How to set a fixed background image.

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

CSS Background Properties