CSS background shorthand

CSS background - shorthand property

If you want to shorten the code, you can also specify all background properties in one attribute. It is called a shorthand property.

Instead of writing like this:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

You can use shorthand properties background:

Example

Set background properties in one declaration using shorthand properties:

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

Try it yourself

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

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

If one of the values of the property is missing, it does not matter, just set the other values in order. Note that in the above example, we did not use the background-attachment property because it has no value.

All CSS background properties

Property Description
background Set all background properties in a shorthand property in one declaration.
background-attachment Set whether the background image is fixed or scrolls with the rest of the page.
background-clip Define the drawing area of the background.
background-color Set the background color of the element.
background-image Set the background image of the element.
background-origin Specify where to place the background image.
background-position Set the starting position of the background image.
background-repeat Set whether and how the background image is repeated.
background-size Specify the size of the background image.