background property

Specifies up to five separate background properties of an object.

Syntax

Integer value = object.put_background( v);Integer value = object.get_background(* sBackground);

Property values

Type: BSTR

up to five of the space-delimited Possible Values, in any order.

color (transparent)

Any of the range of color values available to the IHTMLStyle::backgroundColor property.

image (none)

Any of the range of image values available to the IHTMLStyle::backgroundImage property.

repeat (repeat)

Any of the range of repeat values available to the IHTMLStyle::backgroundRepeat property.

attachment (scroll)

Any of the range of attachment values available to the IHTMLStyle::backgroundAttachment property.

position (0% 0%)

Any of the range of position values available to the IHTMLStyle::backgroundPosition property.

String format

[ <color> || <image> || <repeat> || <attachment> || <position> ]

CSS information

Standards information

• CSS Backgrounds and Borders Module Level 3, 3.10
• CSS 2.1, Section 5.3.7
• Document Object Model (DOM) Level 1 Specification, Section 2.5.5

Remarks

Note  The above values for the IHTMLStyle::background property can be specified in any order, except when using a gradient as the image value. In this case, you must specify the gradient first.

The IHTMLStyle::background property is a shorthand property. Separate properties can be used to specify each property, but in many cases it is more convenient to set them in one place using this shorthand property.

Individual background properties not set by the composite background property are set to their default values. For instance, the default value for image is "none". Setting "background: white" is equivalent to setting "background: white none repeat scroll 0% 0%". So, in addition to setting the background color to white, setting "background: white" clears any image, repeat, attachment, or position values previously set.

The background properties render in the object's content and padding; however, borders are set using the IHTMLStyle::border properties.

Although objects do not inherit the IHTMLStyle::background property, the background image or color of an object's parent appears behind an object if a background is not specified.

For more information about supported colors, see the Color Table.

The background of an element can have multiple layers. The number of layers is determined by the number of comma-separated values in the IHTMLStyle::backgroundImage property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (IHTMLStyle::backgroundAttachment, IHTMLCSSStyleDeclaration::backgroundClip, IHTMLCSSStyleDeclaration::backgroundOrigin, IHTMLStyle::backgroundPosition, IHTMLStyle::backgroundRepeat, and IHTMLCSSStyleDeclaration::backgroundSize). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

Starting in Windows Internet Explorer 9, the background of a box can have multiple layers. The number of layers is determined by the number of comma-separated values in the IHTMLStyle::backgroundImage property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (IHTMLStyle::backgroundAttachment, IHTMLCSSStyleDeclaration::backgroundClip, IHTMLCSSStyleDeclaration::backgroundOrigin, IHTMLStyle::backgroundPosition, IHTMLStyle::backgroundRepeat, and IHTMLCSSStyleDeclaration::backgroundSize). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "-webkit-background" as an alias for this property.

Examples

The following example shows how to create three div objects with the same width and height but different IHTMLStyle::background settings.

div {
   width: 150px;
   height: 150px;
   float: left;
   margin-right: 10px;
}
.circle {
   background: aqua url(circle.png) no-repeat 90% 50%;
   /* This is equivalent to the following individual settings:
   background-color: aqua;
   background-image: url(circle.png);
   background-repeat: no-repeat;
   background-position: 90% 50%;*/
}
.square {
   background: aquamarine url(square.png) no-repeat scroll left bottom;
   /* This is equivalent to the following individual settings:
   background-color: aquamarine;
   background-image: url(square.png);
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: left bottom;*/
}
.triangle {
   background: bisque url(triangle.png) no-repeat local 50px 50px;
   /* This is equivalent to the following individual settings:
   background-color: bisque;
   background-image: url(triangle.png);
   background-repeat: no-repeat;
   background-attachment: local;
   background-position: 50px 50px;*/
}

<body>
   <div class="circle"></div>
   <div class="square"></div>
   <div class="triangle"></div>
</body>

The following image shows the result:

Requirements