{{background:} Background Property - CSS Property Reference :: webDev

{background:} Property

The {background:} property is a shorthand property that allows all the individual background properties to be set in a single declaration (including {background-color:}, {background-image:}, {background-repeat:}, {background-attachment:}, and {background-position:}).

Using this shorthand property, we can set the color of the background (the {background-color:}), and supply the URI of an image to be used on the background at the same time. The remaining properties dictate how and where the image is placed.

As with other shorthand properties, any values that aren’t specified will be set to their defaults. This has implications if, for instance, the {background-color:} is defined as follows:


						#example{
							background: red;
						}

In the above example, all the omitted values will be set to their default states—for {background-image:}, the default is none. If the element already had a background image defined, that specification would be negated, and no image would appear. Therefore, when you’re using the shorthand property, take care to ensure that no conflicts exist. That said, it’s common practice to use {background:} rather than {background-color:} because the former property is shorter. There’s no problem in doing this—as long as you realize the consequences.

The background of an element is the area covered by the {width:} and {height:} of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by {padding:} and {border:}s. A {background-color:} (or {background-image:}) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the {padding:} and {border:} properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots). Note that Internet Explorer versions up to and including 6 don’t support {border-color:transparent; and {background-color:transparent;.

{background-color:}
sets the color of the background.
{background-image:}
supplies the address of an image to be used on the background.
{background-repeat:}
specifies whether a {background-image:} is to scroll with the document or remain fixed to the viewport.
{background-position:}
specifies the initial starting position of the {background-image:}.
{background-:}

The Viewport, The Page Box, And The Canvas

Any {background-color:} or {background-image:} that’s specified for the root element—the <html> element for HTML and XHTML documents—will be rendered as the background for the whole canvas, rather than for the root element alone.1 In other words, the background specified for the root element will cover the entire content area of the browser window, even if the document doesn’t contain enough content to fill the whole window.

Browser Support

Internet Explorer version 7 implemented the scroll value incorrectly in cases where it’s used on a container that has a scroll mechanism—when overflow is set to a value other than visible. In such cases, the {background-image:} scrolls with the content when it should in fact remain in view at the position specified. Internet Explorer versions 6 and below exhibit the same behavior as IE 7 in this respect; however, using the value fixed instead of scroll will cause IE versions 6 and below to exhibit the behavior defined in the specifications for scroll.

Internet Explorer for Windows versions up to and including 7 will only apply the {background:} from inside the border’s edge when the element in question has a layout. If the element does not have a layout, the {background-color:} or {background-image:} will slide under the borders as per the specifications.

Safari versions up to and including 2.0 exhibit a {background-repeat:} bug: the image is repeated incorrectly when no-repeat has been applied. This bug is evident when the image’s height exceeds that of the element to which it’s applied, and when the image is offset from the top position. In these cases, the image will repeat upwards, filling in the area immediately above the point at which the image was initially placed.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

{background:} CSS Property - W3Schools

Property Description Values
background A shorthand property for setting all background properties in one declaration background-color, background-image, background-repeat background-attachment background-position
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll, fixed
background-color Sets the background color of an element color-rgb, color-hex, color-name, transparent
background-image Sets an image as the background url(URL), none
background-position Sets the starting position of a background image top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos
background-repeat Sets if/how a background image will be repeated repeat, repeat-x, repeat-y, no-repeat

{background:} Property CSS Shorthand Guide

By default, the background property will assume the following when you do not declare each value of the properties.

default {background:} values


					element {
					   background-color: transparent;
					   background-image: none;
					   background-repeat: repeat;
					   background-position: top left;
					   background-attachment: scroll;
					  }

Lesson learned: be careful on what you don’t declare. By chosing to not declare a value on a shorthand property, you are explicitly declaring the above default settings.

{{background:} Background Property - CSS Property Reference :: webDev