The background-size property sets the background image size.
It accepts two values: width and height.
A resized background image using background-size.
<style>
.withbg {
background-image: url("/img/css/cardplayers.jpg");
background-repeat: no-repeat;
background-size: 200px 150px;
height: 200px;
}
</style>
<div class="withbg"></div>
background-size accepts 2 values: the width and the height.
Values are set as length units, such as, px, %, em, and others.
If only one value is provided, it will be used as both width and height.
Multiple background sizes can also be specified for multiple images.
background-size: auto | length | cover |
contain | initial | inherit;
| Value | Description |
|---|---|
| auto | Default. Displays background image original size. |
| length | Sets width (first value) and height (second value) of background image. If the second value is not given, it will be set to auto. |
| percentage | Sets width (first value) and height (second value) of background image in percent. If the second value is not given, it will be set to auto. |
| cover | Stretch or crop background image to cover the entire container. |
| contain | Resize background image to make it fully visible. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different background-size values.
<style>
.bg-example {
background-image: url("/img/css/cardplayers.jpg");
background-repeat: no-repeat;
background-size: contain;
height: 300px;
}
</style>
<div class="bg-example"></div>
This table shows when background-size support started for each browser.
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
10.5 | Mar 2010 |
 Safari
|
3.0 | Jun 2007 |
