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 external <a> links with an image (class="external"):

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

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

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

Result = Link to W3C and an RSS/Atom Link

Try it:

This is a sample of text with a CSS background image.

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-Clip - The painting area of the background.
Background-Origin
- The positioning area of the background images.
Background-Size - Size or resize a background image.


© Copyright SS64.com 1999-2014
Some rights reserved