CSS background-size property

Description

CSS background-size property defines the size of the background image on the background painting area.

Syntax

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

Property values

autoDefault

The size of the background image is automatically calculated.

background-size: auto;

contain

The image is rescaled to the largest size such that both sides of the image fit inside the background painting area while preserving the aspect ratio.

background-size: contain;

cover

The image is rescaled to the smallest size such that it covers the background painting area completely while preserving the aspect ratio.

background-size: cover;

+ve length

We specify a fixed length for the background image size.

background-size: 20px;

percentage

It represents the image size as the percentage of the background painting area.

30% means the background image occupies the 30% of the element. And three images can fill the painting area of an element with this size.

background-size: 30%;

Applicable to

It applies to all elements


#CSS digger
Was this article helpful?

 
×

Ctrl+D