The background-size property specifies the size of the background image of an element.
CSS
background-size: [h-size] [v-size] | cover | contain;
A set of two values or a single keyword value can be given to the background-size property. In the two-value set, the first value specifies the width of the background image, and the second value specifies the height of the image. Instead of giving a two-value set, either of the two keyword values - cover or contain, can also be given.
Values
auto : Background image size is determined by its original width and height. This is the default value.
<length> : Specifies the width and height of the background image in px, pt, em, rem, cm, etc. The first value specifies the width and the second value the height. If only one value is specified, then the other value is by default assumed auto.
<percentage> : Specifies the width and height of the background image in percentage, relative to the background positioning area. The first value specifies the width and the second value the height. If only one value is specified, then the other value is by default assumed auto.
cover : Scales the background image while maintaining its aspect ratio so that the entire width and height of the background positioning area is covered by it. This may result in either some horizontal or some vertical area of the background image getting cropped.
contain : Scales the background image while maintaining its aspect ratio so that the full image is visible.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
It is not necessary to give width and height of same dimensions.
Examples
See the Pen background-size examples by Aakhya Singh (@aakhya) on CodePen.
In the above demo, the intrinsic dimension of the background image is 200px/130px, and that of the five div containers is 300px/200px.
Giving auto to the background-size property displays the background image with its original dimensions. Giving 190px 190px results in the background image with both width and height of 190px. Similarly, giving 40% 70% results in the background image with width of length 40% of that of the background positioning area and height of length 70% of that of the background positioning area.
See the Pen background-size examples by Aakhya Singh (@aakhya) on CodePen.
The above demo shows the effect of the keyword values cover and containon the size of the background image. The intrinsic dimension of the image is 200px/130px, and that of the two div containers is 300px/250px.
Look at another example below.
See the Pen background-size example by Aakhya Singh (@aakhya) on CodePen.
Since only one value is given to the background-size property, the other value is by default assumed auto. This makes the width of the image equal to 200px, and height according to the original aspect ratio.
Giving different values for different background images
In order to specify different sizes for different background images of an element, you need to give multiple comma-separated values to the background-size property.
The first value set (before the first comma) specifies the size for the first background image, the second value for the second image. If only one value set is specified, then it will define the size for all the background images.
HTML
<div></div>
CSS
div {
width: 300px;
height: 200px;
background-image: url('star.png'), url('leaves.jpg');
background-repeat: no-repeat;
background-size: contain, cover;
}
In this example, the first value contain specifies the size for the first background image 'start.png', and the second value cover specifies the size for the second background image 'leaves.jpg'.
See the Pen background-size values for different background images by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported in all modern browsers. Multiple background images are not supported in IE8 and earlier versions.
