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:

  <bg-position> / <bg-size>

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.

  Value: Initial value:
background-image: uri none
background-position: <percentage>
left | center | right
top | center | bottom
0% 0%
0 0
top left
backgorund-size: <length> | <percentage> | auto | cover | contain auto auto
background-repeat: repeat | repeat-x | repeat-y | space | round | no-repeat repeat
background-origin: padding-box | border-box | content-box padding-box
background-clip: border-box | padding-box | content-box border-box
background-attachement: scroll | fixed | local scroll
background-color: color | transparent transparent

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


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.