Background Shorthand

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

Background Shorthands

To reduce the code, it is possible to define all the background properties in one single property, which is known as a shorthand property.

HTML
				
					<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>
<p>We have also added a right margin, so that the text will not write over the background image.</p>
CSS
				
					background: #ffffff url("img_tree.png") no-repeat right top;
  margin-right: 200px;

Output

background shorthands

While setting the shorthand property the order of the property values is:

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