background-size

div.test { background-size: auto;}
div.test1 { background-size: contain;}
div.test2 { background-size: cover;}
div.test3 { background-size: 50%;}
div.test4 { background-size: 50px 100px;}

Value	Description
auto	With a single auto, the image is rendered at its natural size. With a second auto, the image scales proportionally to the first value.
contain	Scales the image to fit within the background area while preserving the aspect ratio.
cover	Scales the image to cover the background area while preserving the aspect ratio, using the minimum size needed.
Length value	Sets the background size to a specific value. Accepts units like px and %. Using % is relative to the background painting area, not the image size.

※ The background image below is used in the samples. Its natural size is 100px × 100px. Background tiling is disabled for clarity.

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: auto;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: cover;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: contain;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: 50%;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat; background-size: 50px 100px;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

※ Version data is based on MDN / Can I Use.

Specifies the size of the background image.

You can provide one keyword value, or up to two numeric values (width and height).

With two numeric values, the first sets the width and the second sets the height. With a single numeric value, the second defaults to auto, scaling the image proportionally.

When using %, the percentage is relative to the background painting area — not the image's natural size. To render the image at its natural size, you need to calculate the exact pixel dimensions manually. CSS alone cannot automatically scale to the image's natural size.

To change the background painting area, use the width and height properties, or the background-clip property.