Background

Shorthand to set the CSS properties:

      element { background: Background-Color Background-Image Background-repeat
                      Background-attachment Background-position / [background-size]
                         background-origin background-clip;}

This shorthand is equivalent to the following:

element {
  background-color: color | #hex | (rgb / % | 0-255);
  background-image: url(URI);
  background-repeat: repeat | repeat-x | repeat-y | no-repeat ;
  background-position: X Y | {top|bottom|center} {left|right|center} ;
  background-attachment: scroll | fixed ;
  background-Origin: border-box | padding-box | content-box ;  /* CSS3 */
  background-Clip:   border-box | padding-box | content-box ;  /* CSS3 */
}
  background-size has limited browser support and so is best listed as a separate rule.

Alternatively you can choose to inherit from a parent element: background: inherit ;

The default background property values, any value that is not specified in the shorthand will be set to the default, even if set separately in another css rule.

  background-color: transparent;
  background-image: none;
  background-repeat: repeat;
  background-position: top left;
  background-attachment: scroll;
  background-origin: padding-box;
  background-clip: border-box;

Note that the default value of background-color is "transparent" so even if no inheritance is in place, elements will still show the background of a parent element if no other background has been defined.

Examples

Set the background of H1 to red and apply a background image:

h1 { background: #ff0000 url('../images/grad.png'); }

Style an external <a> link with an image (class="external"):

a.external { background: url(/images/external.png) center right no-repeat; padding-right: 13px; }

Result = HTLM Link (with hyperlink icon displayed)

Style an RSS <a> link with an image (class="rss"):

a.rss { background: url(/images/feedicon.png) center right no-repeat; padding-right: 18px; }

Result = RSS/Atom Link (with feed icon displayed)

Try it:

Browser Support: All major browsers (CSS 1) Firefox, IE, Safari. Web browsers will interpret the shortcut values in any order.

“I've learned that our background and circumstances may have influenced who we are, but we are responsible for who we become” ~ James Rhinehart

Related:

Background - MDN Web Docs.
Background-Clip - The painting area of the background.
Background-Origin - The positioning area of the background images.
Background-Size - Size or resize a background image.