CSS Background Shorthand

The CSS background shorthand property is used to define a background for an element. background-color, background-picture, background-repeat, background-position, background-clip, background-size, background-origin and background-attachment together comprise the CSS background properties.

CSS background- Shorthand property

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

Rather than 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:

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

When using the shorthand property the order for the property value is:

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

It doesn’t make any difference in the event that one of the property values is missing, as long as different ones are in a specific order. Note that we don’t use the background-attachment property in the examples above, as it doesn’t have a value.


All CSS Background Properties

PropertyDescription
backgroundSets all the background properties in one declaration
background-attachmentSets whether a background image is fixed or scrolls with the rest of the page
background-clipSpecifies the painting area of the background
background-colorSets the background color of an element
background-imageSets the background image for an element
background-originSpecifies where the background image(s) is/are positioned
background-positionSets the starting position of a background image
background-repeatSets how a background image will be repeated
background-sizeSpecifies the size of the background image(s)

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder