CSS Background Shorthand

PREPARATIONX December 24, 2021

 

CSS background - Shorthand property

To shorten the code, it is also 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 the background properties in one declaration:

body {
  background: #ffffff url("img_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

It does not matter if one of the property values is missing, as long as the other ones are in this order. Note that we do not use the background-attachment property in the examples above, as it does not have a value.

Test Yourself With Exercises

Exercise:

Set the background color of the <h1> element to "lightblue".

<style>
h1 {
  : lightblue;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Start the Exercise

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)
Tags
PREPARATIONX

Posted by PREPARATIONX

Our niche is creating personalised learning experiences for every type of learner. The preparationx way of learning provides students a learning platform where they can learn, engage and be excited about charting their own path to discover the world. preparationx – The Learning App brings together the best teachers, technology, content, media for creating a seamless, world class learning experience for each and every student.

Post a Comment

0 Comments