CSS background-size Property

Definition and Usage

background-size This property specifies the size of the background image.

Specify the size of the background image:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

background-size: length|percentage|cover|contain;

Value	Description	Test
length	Set the height and width of the background image. The first value sets the width, and the second value sets the height. If only one value is set, the second value will be set to "auto".	Test
percentage	Set the width and height of the background image in percentage of the parent element. The first value sets the width, and the second value sets the height. If only one value is set, the second value will be set to "auto".	Test
cover	Extend the background image to be large enough to completely cover the background area. Some parts of the background image may not be displayed in the background positioning area.	Test
contain	Extend the image to the maximum size to make its width and height completely fit the content area.	Test

Default Value:	auto
Inheritance:	no
Version:	CSS3
JavaScript Syntax:	object.style.backgroundSize="60px 80px"

Stretch the background image: Stretch the background image to completely cover the content area.
Stretch the background image and horizontally copy the background image four times: Stretch the background image to make the background image horizontally copied exactly four times.

The numbers in the table indicate the first browser version that fully supports this property.

Chrome	Edge	Firefox	Safari	Opera
Chrome	IE / Edge	Firefox	Safari	Opera
4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-