Export (0) Print
Expand All
top
Expand Minimize

backgroundSize property

Specifies the size of the background images.

CSS Backgrounds and Borders Module Level 3, Section 3.9Internet Explorer 9

 

Syntax

Integer value = object.put_backgroundSize( v);Integer value = object.get_backgroundSize(* sSize);

Property values

Type: BSTR

auto (auto)

Default. See Remarks.

contain (contain)

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

cover (cover)

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

length (length)

A floating-point number, followed by a supported length unit.

percentage (percentage)

An integer, followed by a percent (%). A percentage value is relative to the background positioning area.

String format

[ <length> | <percentage> | auto ] {1,2} | cover | contain [ , [ <length> | <percentage> | auto ] {1,2} | cover | contain ]*

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valueauto

Standards information

Remarks

The length, percentage, and auto values can be used twice per image layer. The first value is the width of the corresponding image, and the second value is the image's height. If only one value is given, the second is assumed to be auto.

An auto value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension. If either of these values is not available, the image's intrinsic size is used. If the image's intrinsic size is not available, it is assigned the value of 100%. If both values are auto, use the intrinsic width, height, or both, of the image. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for contain.

Negative values are not allowed.

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 IHTMLCSSStyleDeclaration::backgroundImage property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (IHTMLCSSStyleDeclaration::backgroundAttachment, IHTMLCSSStyleDeclaration::backgroundClip, IHTMLCSSStyleDeclaration::backgroundOrigin, IHTMLCSSStyleDeclaration::backgroundPosition, IHTMLCSSStyleDeclaration::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.

Examples

In this example, the background image of the blue circle is stretched 100% in both directions to completely cover the content area.


.circle {
   width: 150px;
   height: 150px;
   background-color: #D3D3D3;
   background-image:url(circle.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: 100% 100%;
}


The above CSS would result in the following image:

A background image stretched to 100% of the content area

In this example, the image of the green square is stretched so that it is duplicated twice horizontally and the aspect ratio is preserved.


.square {
   width: 150px;
   height: 150px;
   background-color: #D3D3D3;
   background-image:url(square.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: 50% auto;
}

The above CSS would result in the following image:

A background image sized to 50% auto

In this example, the image of the red triangle is sized to 20 pixels by 20 pixels.


.triangle {
   width: 150px;
   height: 150px;
   background-color: #D3D3D3;
   background-image:url(triangle.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: 20px 20px;
}

The above CSS would result in the following image:

A background image sized to 20px by 20px

Requirements

Minimum supported client

Windows Vista with SP1, Windows 7 [desktop apps only]

Minimum supported server

Windows Server 2008 R2 [desktop apps only]

Header

Mshtml.h

IDL

Mshtml.idl

DLL

Mshtml.dll

See also

Reference
IHTMLCSSStyleDeclaration::backgroundColor
IHTMLCSSStyleDeclaration::backgroundImage
IHTMLCSSStyleDeclaration::backgroundRepeat
IHTMLCSSStyleDeclaration::backgroundAttachment
IHTMLCSSStyleDeclaration::backgroundPosition
IHTMLCSSStyleDeclaration::backgroundClip
IHTMLCSSStyleDeclaration::backgroundOrigin
IHTMLCSSStyleDeclaration::background

 

 

Community Additions

ADD
Show:
© 2014 Microsoft