Tóm Tắt
background-size
Summary
Specifies the size of the background images.
Overview table
- Initial value
auto
- Applies to
- All elements
- Inherited
- No
- Media
- visual
- Computed value
- for <length> the absolute value, otherwise a percentage
- Animatable
- Yes
- CSS Object Model Property
backgroundSize
- Percentages
- see text
Syntax
background-size: auto
background-size: contain
background-size: cover
background-size: length
background-size: percentage
Values
- auto
- Default. See Remarks.
- 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
- 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
- A floating-point number, followed by an absolute units designator (
cm
,mm
,in
,pt
, orpc
) or a relative units designator (em
,ex
, orpx
).
For more information about the supported length units, see the CSS Values and Units Reference.
- percentage
- An integer, followed by a percent (%). A percentage value is relative to the background positioning area.
Examples
Basic list of syntax examples for background-size.
background-size
: cover
background-size
: contain
background-size
: 50%
background-size
: 3em
background-size
: 12px
background-size
: auto
background-size
: 50% auto
background-size
: 3em
25%
background-size
: auto
6px
background-size
: auto
auto
background-size
: auto
, auto
background-size
: 50%, 25%, 25%
background-size
: 6px
, auto
, contain
background-size
: inherit
HTML structure of a series of <div>
s that are identical except that they have different background-size
values applied to the background image.
<
p
>Original image is 273 x 286 px, and has a transparent area around the outside of roughly 45px.</
p
>
<
div
class
="one"
><
code
>background-size: auto auto;</
code
></
div
>
<
div
class
="two"
><
code
>background-size: contain;</
code
></
div
>
<
div
class
="three"
><
code
>background-size: cover;</
code
></
div
>
<
div
class
="four"
><
code
>background-size: 20% 25%;</
code
></
div
>
<
div
class
="five"
><
code
>background-size: 100px 400px;</
code
></
div
>
<
div
class
="six"
><
code
>background-size: 100% 250px;</
code
></
div
>
<
div
class
="seven"
><
code
>background-size: 100% 250px, 20% 25%;</
code
></
div
>
CSS applied to the HTML example seen above.
div
{
width
:
17%
;
height
:
200px
;
padding
:
10px
;
border-radius
:
20px
;
box-shadow
:
2px
2px
10px
rgba
(0
,0
,0
,0.75
);
float
: left
;
margin
:
0
20px
20px
0
;
background-color
:
rgba
(0
,0
,0
,0.25
);
background-image
:
url
(/logo/wplogo_transparent_xlg.png);
}
code
{
background-color
:
rgba
(255
,255
,255
,0.7
);
padding
:
2px
;
border-radius
:
5px
}
.one
{
background-size
: auto auto
;
}
.two
{
background-size
: contain
;
}
.three
{
background-size
: cover
;
}
.four
{
background-size
:
20%
25%
;
}
.five
{
background-size
:
100px
400px
;
}
.six
{
background-size
:
100%
250px
;
}
.seven
{
background-image
:
url
(/logo/wplogo_transparent_xlg.png), url
(/logo/wplogo_transparent_xlg.png);
background-size
:
100%
250px
, 20%
25%
;
}
View live example
Notes
Remarks
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 background-image property. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties (background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size). The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on.
Related specifications
- CSS Backgrounds and Borders Module Level 3
- Candidate Recommendation
See also
Related articles
Background
Related pages
- CSSStyleDeclarationCSSStyleDeclaration
- currentStylecurrentStyle
- defaultsdefaults
LayoutRect
- runtimeStyleruntimeStyle
- stylestyle
style
Reference
- background-colorbackground-color
- background-imagebackground-image
- background-repeatbackground-repeat
- background-attachmentbackground-attachment
- background-positionbackground-position
- background-clipbackground-clip
- background-originbackground-origin
- backgroundbackground