CSS Reference Manual

CSS @rules (RULES)

Comprehensive CSS Properties

CSS border Property CSS background-repeat attribute

CSS3 background-Usage and examples of size property

CSS background-The size of the background image specified by the size property.

The following table summarizes the usage context and version history of this property.

Default value:	auto auto
Applicable to:	All elements
Inheritance:	None
Animated by:	Yes.Please refer to Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object　　　object.style.backgroundSize="60px 80px"

Background size usage syntax

The syntax of this property is as follows:

background-size: length | percentage | auto | cover | contain | initial | inherit

The following examples demonstrate how to use background-size property.

Example

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: url("images/sky.jpg) no-repeat;
　　　　background-size: contain;
}

Test and see‹/›

Tip:The background-The size attribute is usually used to create full-size background images, which will be scaled according to the browser's viewport or width size.

Attribute value

The following table describes the values of this attribute.

Value	Description
length	Set the width and height of the background image to the specified length. The first value sets the width, and the second value sets the height. If only one value is specified, the second value defaults to auto. Negative length values are not allowed.
percentage	Set the width and height of the background image to the percentage of the background positioning area. The first value sets the width, and the second value sets the height. If only one value is specified, the second value defaults to auto. Negative percentage values are not allowed.
auto	An auto for a dimension value scales the background image in the corresponding direction, maintaining its inherent proportion. If both sizes are specified with values, the background image will include its own width and height, which is the default behavior.
cover	Scale the image to the minimum size while maintaining the inherent aspect ratio (if any) to make its width and height both completely cover the background positioning area.
contain	Scale the image while maintaining its inherent aspect ratio (if any), to the maximum size to make its width and height both fit the background positioning area.
initial	Set this attribute to its default value.
inherit	If specified, the associated element adopts its parent element's background-The calculated value of the size attribute.

Browser compatibility

background-Browser compatibility of the size attribute, all mainstream browsers support this attribute.

	Firefox 4+ Google Chrome4+ Internet Explorer 9+ Apple Safari 3+ Opera 10.5+