The CSS Background Property

The CSS background property explained

By using the CSS background property, you can modify the background of any element:

body {
    background: lightblue url("pom-laptop.png") repeat fixed right;
}

It is actually a CSS background shorthand for eight separate subproperties:

• background-image
• background-position
• background-size
• background-repeat
• background-attachment
• background-origin
• background-clip
• background-color

Syntax for the CSS background property

As we are using the CSS background shorthand here, you don't need to list the names of subproperties – only the values themselves:

background: image position / size repeat attachment origin clip color;

You do not need to define all the values. However, position and size do need to come in a pair, separated by a slash. It is also recommended to follow the order displayed in the syntax example.

You can see all the values for the CSS background property defined in the table below.

Property Values

Browser support

Mobile browser support