CSS3 background-sizeProperty
Example
Specifies the size of the background image:
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
Try it Yourself »
More examples at the bottom of this page.
Browser Support
The numbers in the table indicate the first browser version that supports the property.
The number preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Tag definition and usage instructions
background-size sets the background image size.
The image can retain its original size, be stretched to a new size, or be scaled to the size of the element's available space while maintaining its original aspect ratio.
| Default Value: | auto |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object object.style.backgroundSize="60px 80px" |
Syntax
background-size: length|percentage|cover|contain;
| Value | Description |
|---|---|
| length | Sets the height and width of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set toauto(Auto) |
| percentage | Percentages are calculated relative to the background positioning area. The first value sets the width, the second value sets the height, with values separated by spaces. Separate the specified height and width with a comma,Specify multiple backgrounds separated by spaces. If only one value is given, the second is set to "auto". |
| cover | In this case, the image's aspect ratio is maintained and the image is scaled to the smallest size that completely covers the background positioning area. |
| contain | In this case, the image's aspect ratio is maintained and the image is scaled to the largest size that fits within the background positioning area. |
Example
/* Keyword */
background-size: cover
background-size: contain
/* One value: this value specifies the image's width, and the image's height is implicitly auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* Two values */
/* The first value specifies the width of the image, the second value specifies the height of the image */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* Comma-separated multiple values: set multiple backgrounds */
background-size: auto, auto /* Unlike background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
/* Global properties */
background-size: inherit;
background-size: initial;
background-size: unset;
background-size: cover
background-size: contain
/* One value: this value specifies the image's width, and the image's height is implicitly auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* Two values */
/* The first value specifies the width of the image, the second value specifies the height of the image */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* Comma-separated multiple values: set multiple backgrounds */
background-size: auto, auto /* Unlike background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
/* Global properties */
background-size: inherit;
background-size: initial;
background-size: unset;
Online Examples
Stretch Background Image
Stretches the background image to completely cover the content area.
Four background images stretched horizontally.
Stretch 4 horizontal background images.
Related Articles
CSS3 Tutorial:CSS3 Backgrounds
other extensions