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;}

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;}

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');}

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

Example

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

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');
}

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;
}

Background image-set positioning and non-tiling

Remark Let the background image 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;
}

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;
}

Background-shorthand properties

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;}

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

CSS background properties

Property

Description

background

Abbreviated attribute, the role is to set the background attribute in a statement.

background-attachment

Whether the background image is fixed or scrolls with the rest of the page.

background-color

Set the background color of the element.

background-image

Set the image as the background.

background-position

Set the starting position of the background image.

background-repeat

Set whether and how the background image is repeated.