[CSS] How to adjust the size of the background image with background-size?

Use CSS to give your website a background. There are two types of backgrounds: background colors and background images.

Specify the background color with “background-color” and the background image with “background-image”.

Since the background color is basically a single color, there is no concept of size.

“background-size” introduced this time is a property used together with background-image.

You can freely adjust the size of the background image. There are various methods , such as specifying an arbitrary size or adjusting to the size of the element .

This article summarizes how to use background-size, so please refer to it.

Basic usage of background-size

As mentioned above, background-size is a property that specifies the size of the background image specified by background-image.

Background-size alone doesn’t make sense, it only works with background-image on the same element .

The description is as follows.

CSS
div {
background-image:url(sample.png); /
background-size:100px; /
}

In this way, be sure to specify the background image as a set.

This is a description to display the image sample.png in the div as a background image with a width of 100 pixels.

background-size value

In the code above, we set the background-size to 100px.

There are various other values ​​for background-size, so I will introduce them one by one.

auto

It will be displayed in the size of the original image.

CSS
div {
background-image:url(sample.png); /
background-size:auto; /
}

Since it is the default value, you do not need to specify it.

Regardless of the size of the element, it is displayed as it is the size of the image .

For example, let’s say you have an image with a width of 500 pixels as shown below.

If you specify a background image for an element with a width of 500 pixels or more, it will be displayed as is.

CSS
div {
width:550px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
background-size:auto; /
}

It is a description that specifies the above image as the background for the 550 pixel background element. The height is 375 pixels, which is the same as the image.

I also set the background color to make it easier to see the range of the elements.

Also, since the background image is set to be repeated by default, we specified not to repeat it with “background-repeat:no-repeat”.

As you can see, the 500-pixel image fits inside the 550-pixel gray area.

But what if the dimensions of the element are smaller than the image?

CSS
div {
width:400px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
background-size:auto; /
}

I set the size of the element to 400 pixels.

The large building on the right is cut off and is not visible.

The image is 500 pixels and the element is 400 pixels, so it doesn’t fit.

In this way, auto reflects the size of the image as it is, regardless of the size of the element.

I fixed it at 375 pixels this time, but if the height is smaller than the element as well as the width, it will fit as it is.

However, if it is larger than the element, the image will be cut off in the middle.

pixel

Specifies the size of the image in px.

CSS
div {
width:550px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
background-size:500px; /
}

I specified the size of the image to be 500 pixels.

If there is only one value, it is interpreted as a width specification, and the scale is scaled accordingly.

Two values ​​specify width and height .

CSS
div {
width:550px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
background-size:500px 200px; /
}

I have given an image that is 500 pixels wide and 375 pixels high to be 500 pixels wide and 200 pixels high.

In this way, the original scale of the image is ignored and displayed . Basically, you should specify only the width.

You can also write something like:

CSS
div {
width:550px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
background-size:500px auto; /
}

By setting the height to auto, it will be adapted to the width scale.

It is also possible to specify the height and set the width to auto.

percent

Specify the image size in %.

This is a percentage of the element size , not a percentage of the image size .

CSS
div {
width:600px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
}

I specified the original 500px wide image at 100% for a 600px wide element.

A 500 pixel image is displayed at 600 pixels across the width of the element, slightly grainy.

As with pixel specifications, it is the width that the number reflects when there is only one value.

If there are two values, the first is the width and the second is the height.

CSS
div {
width:600px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
background-size:auto 100%; /
}

I set the width to auto and the height to 100%.

The width is smaller because the image is displayed to fit the height of the element.

In addition to 100%, it is also possible to specify a detailed numerical value.

CSS
div {
width:600px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; 
background-size:50% ; /
}

I specified a size of 50%.

The image is displayed at 50% of the element’s width, or 300 pixels.

Unlike pixel specification, which specifies the image size strictly, it is based on the size of the element, so it is convenient when the size of the element is variable .

contains

It is a specification that the original image should fit all in the element .

CSS
div {
width:400px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
background-size:contain; /
}

Given an image that is 500 pixels wide and 375 pixels high in an element that is 400 pixels wide and 375 pixels high:

As the width is adjusted to 400 pixels, the height is reduced and the bottom is left over.

Since it is a specification that all images should fit, it is not always possible to just fit them horizontally.

CSS
div {
width:550px; /
height:275px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
background-size:contain; /

I set the height to 275 pixels.

The width is left over as much as the height is reduced.

In this way, the value of contain is to match the width or height of the element so that the whole is displayed.

cover

Specifies that the entire area of ​​the element is covered by the background image .

CSS
div {
width:400px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; 
background-size:cover; /

I specified the width of the element to be 400 pixels smaller than the image. In the case of contain, the image is displayed to fit the entire image, so the width of the image is also 400 pixels, leaving some extra height.

On the other hand, cover is a specification that prevents the remainder from appearing, so it will be displayed as follows.

The right side of the image is cut off, but there are no parts of the element not covered by the background image.

In any case, the entire area of ​​the element is covered with the image.

CSS
div {
width:600px; /
height:375px; /
background-color:gray; /
background-image:url(sample.png); /
background-repeat:no-repeat; /
background-size:cover; /

I specified the width of the element to be 600 pixels larger than the width of the image.

Images are also displayed at 600 pixels.

Be careful when specifying an image that is smaller than the element , as the image quality will be rougher as it is enlarged .

Cover is often used when you want to keep the background image uninterrupted, such as in responsive design.

Used with background-position

background-position is a property that specifies the position to display the background image .

Horizontal and vertical positions can be specified.


I have a 300px wide background image with background-position set to right bottom.

The horizontal position is displayed on the right, and the vertical position is displayed on the bottom.

It is possible to display the image adjusted in size in this way at any position. You can specify left, center, and right for horizontal position, and top, center, and bottom for vertical position.

You can use numeric values ​​as well as three positional specifications.

This specifies 50 pixels from the right and 100 pixels from the bottom.

This way you can place the image anywhere you want without touching the edge of the element.

If only a numerical value is written without specifying right, bottom, etc., it is interpreted as the horizontal distance from the left and the vertical distance from the top.

It can also be used when the image is larger than the element.

This specifies that the cover will display an image over the entire area of ​​the element.

The right side of the image doesn’t fit because the element is too narrow.

I specified the horizontal position to right.

The image starts on the right edge and ends up on the left.

By specifying the placement position of the image in this way, you can choose which part to display.

multiple background images

Multiple background images can be specified for one element.

background-size can also be specified separately .

Multiple parameters are specified by separating them with “,” like this.

By specifying multiple background-sizes and background-positions separated by “,”, they are applied according to the order of the background images.

Be careful with shorthand

Shorthand is to specify multiple values ​​for a single property.

The background can be described as follows.

CSS
div {
background:gray url(sample.png) no-repeat right top;
}

The background color, background image, background image repetition, and background image display position are specified all at once.

You can converge the background-color, background-image, background-repeat, and background-position into one property called background.

background-size is also grouped into background, but you need to be careful how you describe it.

CSS
div {
background:gray url(sample.png) no-repeat right top / cover;
}

If you do not put “/” in front of the value like this, it will not be recognized correctly.

summary

You can freely adjust the size of the background image by using background-size.

Pixels are the simplest, and the size can be specified precisely, so it’s useful when you want to display one-point decorations.

When used in conjunction with background-position, you can display an image in any size and anywhere you like .

This presentation is recommended for images that are decorative and not content-critical.

Since the background property can be set in various ways, detailed adjustments are required.

Make sure you understand adjusting the bockgoround-size property as well.