HTML and CSS Reference
In-Depth Information
Name
background-size
Values:
<bg-size> [ , <bg-size> ]*
Expansions:
<bg-repeat-style>
[ <length> | <percentage> |
auto
]{1,2} |
cover
|
contain
Initial value:
auto
Applies to:
All elements
Inherited:
No
Computed value:
See description
Description:
Defines the size of one or more background origin images. If two keywords are used (e.g.,
50px 25%
), the first defines the horizontal size of the image and the second defines the vertical
size. The origin image can be deformed to exactly cover the background with
100% 100%
. By
contrast,
cover
scales up the image to cover the entire background even if some of it exceeds
the background area and is thus clipped, and
contain
scales up the origin image so that at
least one of its dimensions exactly fills the corresponding axis of the background area.
Examples:
body {background-size: 100% 90%;}
div.photo {background-size: cover;}
