How to use background-size in CSS

The CSS background-size property sets the size of the background image of the element. Images can be left to full size, stretched or limited to fit the available space.

background-image: url('some-example-image.jpg');


background-size: cover;

Image description

Size in pixels or percentage

background-size: 300px;

Image description

background-size: 15%;

Image description


background-size: contain;

Image description


If the container is larger than the image, this will mosaic the image if the background-repeat property is not set to no-repeat.

background-repeat: no-repeat;

Image description


The background-position CSS property sets the initial position for each background image.

background-position: center;

Image description


Spaces not covered by the background image are filled with the background-color property, and the background color will be visible on background images that have transparency.

background-color: lightgreen;

Image description