CSS Background

CSS background properties are used to define the background effects for HTML elements.

CSS properties that 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 set in the body selector:

Example

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

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

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

Example

Background Image

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

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

Example of setting a page background image:

Example

Here is an example of a poor combination of text and background image. The text is difficult to read:

Example

Background Image - Horizontal or Vertical Tiling

By default, the background-image property tiles the image horizontally or vertically on the page.

Some images look uncoordinated if tiled both horizontally and vertically, as shown below:

Example

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

Example

Background Image - Setting Position and No Tiling

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

Example

In the above example, the background image is displayed at the same position as the text. To make the page layout more reasonable and not affect text readability, we can change the image's position.

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

Example

Background - Shorthand Property

In the above examples, the page's background color is controlled by many properties.

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

The shorthand property for background color is "background":

Example

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

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

Not all of these properties need to be used; you can use them according to the actual needs of the page.

This example uses the previously introduced CSS; you can view the corresponding example: CSS Example

More Examples

How to set a fixed background image

CSS Background Properties