CSS background-size Property

CSS background-size Property

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 horizontal direction.

If the property is missing, it's 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 x × 256 px image.

In other words -

By default, the background image will have its original size. This may not always be ideal and can be changed with the background-size property.

Syntax -

background-size: length | percentage [ length | percentage ]

Now we will see the values of the property -

auto	The background image is displayed in its original size, this is the default value.
length	Sets the width and height of the background image. The first value sets the width, the second value sets the height. If one value is given, the other is set to "auto".
percentage	Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If one value is given, the another is set to "auto"
cover	Resize the background image to cover the entire container.
contain	Resize the background image to make sure the image is fully visible on the screen.
initial	Set this property to its default value.
inherit	Inherits this property from its parent element.

Now we will see Example -

Example1 - An element wider than its background image

Output -

Since the element is wider than its background, the background is tiled, as we saw before. This doesn’t look good, though. Just like before, we can set background-repeat to no-repeat.

Example 2 - Setting background-repeat to no-repeat

Output -

We can improve this further by setting the background-size property to cover. This will resize the background image to make sure that the element is fully covered. If the aspect ratio of the image doesn’t match that of the element, the image will be cropped.

Example 3 - Setting background-size to cover

Output -

This looks better. The background fills the element without tiling or a gap. It’s still not

ideal, though. Most of the image is cut off – we don’t see the mountains, which are the

focal point of the image.

To fix this, we can combine the background-position property with background size, setting the position to center to focus on the center of the image.

Example - Focusing on the center of the background image

Output -

Now, we get a much nicer result. The mountains at the center of the background image are visible.

There are some other useful values for background-size as well. One such value is contain, which will resize the background image so that the entire image fits within the element.

Setting background-size to contain-

Example - Setting a specific background size

Output -