The background-size property
The background-size property specifies
a size of a background image. The property
value is any
size units,
or the auto, cover or contain keywords.
Syntax
selector {
background-size: value;
}
Keywords
| Value | Description |
|---|---|
auto |
The background will have a natural size, the same
as the real size of the background image. If
auto is specified for only one side, then
on this side the background will be scaled so
as to have undistorted proportions.
|
cover |
Scales the image so that it covers the entire block while maintaining its proportions. The image will try to fit entirely, but this will not always work, so some part of it will be cut off. The block will always be covered by the entire image. |
contain |
Scales the image so that it fits entirely into the block while maintaining its proportions. In this case, it can occupy either the entire width or the entire height (depending on the image proportions and the element size). In the general case, the block will not be completely covered by the image (but the entire image will always be visible, albeit in a reduced version). |
Default value: auto.
Usage
Size units and auto can be used in various
combinations, for example: auto 20px, or
30% 20px, or auto 30% and so on. In
this case, the first parameter sets the background
width, and the second parameter sets the background
height. If one parameter is specified, it will set
the background in both width and height at the same
time.
Example
Now the background image will have its natural size:
<div id="elem"></div>
#elem {
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 550px;
height: 400px;
}
:
Example
Now the background image will have a size
of 300px by 400px (in our case,
the image proportions will be distorted):
<div id="elem"></div>
#elem {
background-size: 300px 400px;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Example
Now the background image will be
400px by 400px (in our
case, the image proportions will be
distorted):
<div id="elem"></div>
#elem {
background-size: 400px;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Example
Now the background image will be 400px
horizontally, and its vertical size will be
adjusted so that the proportions are not
distorted:
<div id="elem"></div>
#elem {
background-size: 400px auto;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Example
Now the background image will be 400px
vertically, and its horizontal size will be
adjusted so that the proportions are not
distorted:
<div id="elem"></div>
#elem {
background-size: auto 400px;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
width: 400px;
height: 400px;
}
:
Example . The contain value
Look at how the contain value works:
<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>
.elem {
background-size: contain;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
margin-bottom: 20px;
}
#elem1 {
width: 600px;
height: 500px;
}
#elem2 {
width: 500px;
height: 600px;
}
#elem3 {
width: 400px;
height: 400px;
}
#elem4 {
width: 300px;
height: 400px;
}
#elem5 {
width: 200px;
height: 400px;
}
#elem6 {
width: 300px;
height: 100px;
}
:
Example . The cover value
Look at how the cover value works:
<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>
.elem {
background-size: cover;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
margin-bottom: 20px;
}
#elem1 {
width: 600px;
height: 500px;
}
#elem2 {
width: 500px;
height: 600px;
}
#elem3 {
width: 400px;
height: 400px;
}
#elem4 {
width: 300px;
height: 400px;
}
#elem5 {
width: 200px;
height: 400px;
}
#elem6 {
width: 300px;
height: 100px;
}
:
Example . Let's improve the work of cover
The performance of the cover value can be
improved if you center the image using the
background-position
property (in our case, the horses’ heads will appear
on the visible parts, and not their butts):
<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>
.elem {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url("bg.png");
border: 1px solid black;
margin-bottom: 20px;
}
#elem1 {
width: 600px;
height: 500px;
}
#elem2 {
width: 500px;
height: 600px;
}
#elem3 {
width: 400px;
height: 400px;
}
#elem4 {
width: 300px;
height: 400px;
}
#elem5 {
width: 200px;
height: 400px;
}
#elem6 {
width: 300px;
height: 100px;
}
:
See also
-
the
backgroundproperty
that is a shorthand property for a background
