The background property specifies a color or an image of an element’s content, padding and border. This property can be used on inline, block, inline-block, table elements and ::first-letter and ::first-line.

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

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

The CSS background properties can be specified in any order, with a couple of exceptions. The recommended order is:

background:
  <bg-image>
  <bg-position> / <bg-size>
  <bg-repeat>
  <bg-origin>
  <bg-clip>
  <bg-attachment>
  <bg-color>

The background-position and the background-size properties must be written in a specific order and separated by a slash (/).

background: url(image.jpg) 50% 50% / cover ...

When using numerical values for the background-position the order of the values is important. However, when using the keywords: top, right, bottom, left, the order is not important.

background-position: <horizontal position> <vertical position>
background-position: 50% 70%;

When the values of background-origin and background-clip are different, they must be declared in the correct order, as these two properties share some values. If both properties have the same value, it is possible to write the value once and it will apply to both properties. For example:

background: border-box url(image.jpg) white;

is equivalent to:

background-image: url(image.jpg);
background-origin: border-box;
background-clip: border-box;
background-color: white;

The background property, along with all other background-related properties, is not inherited.

See the Pen background by majadc (@majadc) on CodePen.

Resources

• CSS2 Spec
• MDN