CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS3 background-size Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

The background-size CSS property specifies the size of the background images.

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

Default value: auto auto
Applies to: All elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

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

The example below shows the background-size property in action.

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

Tip:The background-size property is typically used to create full size background images that scale according to the size of viewport or witdh of the browser.


Property Values

The following table describes the values of this property.

Value Description
length Sets the width and height of the background image to the specified length. The first value sets the width, and the second value set the height. If only one value is specified the second is assumed to be auto. Negative length values are not allowed.
percentage Sets 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 is assumed to be auto. Negative percentage values are not allowed.
auto An auto value for one dimension scales the background image in the corresponding direction such that its intrinsic proportion is maintained. If auto value is specified for both the dimensions, then the background image contains its own width and height, which is default behavior.
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.
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.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element background-size property.

Browser Compatibility

The background-size property is supported in all major modern browsers.

Browsers Icon

Basic Support—

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

Further Reading

See tutorial on: CSS Background, CSS3 Background.

Related properties: background, background-attachment, background-color, background-image, background-clip, background-position, background-repeat, background-origin.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.