CSS Background Shorthand

CSS background - Shorthand property

To shorten the code, it is possible to specify all the background properties in one single property. This is called a shorthand property.

Instead of writing:

body {

 background-color: #ffffff;

 background-image: url("img_tree.png");

 background-repeat: no-repeat;

 background-position: right top;

}

You can use the shorthand property background:

Example

Use the shorthand property to set all the background properties in one declaration:

body {

 background: #ffffff url("img_tree.png") no-repeat right top;

}

The background property is a shorthand property for the following properties:

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

If some of the property values are missing, they will be set to their initial (default) values.