The [background-size](<https://www.w3.org/TR/2014/CR-css3-background-20140909/#the-background-size>)
property enables one to control the scaling of the background-image
. It takes up to two values, which determine the scale/size of the resulting image in vertical and and horizontal direction. If the property is missing, its deemed auto
in both width
and height
.
auto
will keep the image’s aspect ratio, if it can be determined. The height is optional and can be considered auto
. Therefore, on a 256 px × 256 px image, all the following background-size
settings would yield an image with height and width of 50 px:
background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;
So if we started with the following picture (which has the mentioned size of 256 px × 256 px),
we’ll end up with a 50 px × 50 px on the user’s screen, contained in the background of our element:
One can also use percentage values to scale the image with respect of the element. The following example would yield a 200 px × 133 px drawn image:
#withbackground {
background-image: url(to/some/background.png);
background-size: 100% 66%;
width: 200px;
height: 200px;
padding: 0;
margin: 0;
}
The behaviour depends on the [background-origin](<https://www.w3.org/TR/2014/CR-css3-background-20140909/#the-background-origin>)
.
The last example in the previos section lost its original aspect ratio. The circle got into an ellipse, the square into a rectangle, the triangle into another triangle.
The length or percentage approach isn’t flexible enough to keep the aspect ratio at all times. auto
doesn’t help, since you might not know which dimension of your element will be larger. However, to cover certain areas with an image (and correct aspect ratio) completely or to contain an image with correct aspect ratio completely in a background area, the values, contain
and cover
provide the additional functionality.
contain
and cover
Sorry for the bad pun, but we’re going to use a picture of the day by Biswarup Ganguly for demonstration. Lets say that this is your screen, and the gray area is outside of your visible screen. For demonstration, We’re going to assume a 16 × 9 ratio.
We want to use the aforementioned picture of the day as a background. However, we cropped the image to 4x3 for some reason. We could set the background-size
property to some fixed length, but we will focus on contain
and cover
. Note that I also assume that we didn’t mangle the width and/or height of body
.
contain