General overview

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),

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a614c4ac-bcfe-4c6f-bf6e-fca53e82cd76/Untitled.png

we’ll end up with a 50 px × 50 px on the user’s screen, contained in the background of our element:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/532157c1-bf28-4d0e-b9e7-cf7774e7b961/Untitled.png

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;
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/111f719f-abf4-4ce3-809f-a37a0a0541a8/Untitled.png

The behaviour depends on the [background-origin](<https://www.w3.org/TR/2014/CR-css3-background-20140909/#the-background-origin>).

Keeping the aspect ratio

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.

Eggsplanation for 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.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ba06198-09d0-49a9-bca7-42ff32e67f07/Untitled.png

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