CSS background-size is used to set the background image size inside the block. CSS background image can be used to give the background of a block. A background size can be used when we want a mage to show in required size. This image can be any format like jpg, png etc. You should also see CSS background-attachment.

The syntax for CSS background-size is:

For Example:

Output

This is the HTML paragraph inside the div for background size text. This div contains background image of globe. This background image has given position center and is not repeated for many times. The background center make it at the center position inside the block. Th background size given here.

CSS background-size values list

The values and description of this property is used to specify the background size of background image. You should also see CSS background-attachment.

Sr. No. value Description
1 auto Used to automatically determine the width and height of background image size inside block.
2 contain Used to make background image to fit the block.
3 cover Used to make background image to cover the whole block or background area.
4 length in px Used to give background image width and height in pixel inside block.
5 length in percentage Used to make background image width and height in percentage inside block.
6 initial Used to define as the property initial value.
7 inherit Used to define the computed value of property on the elements parent.

CSS background-size cover

In this example we will use CSS background-size to cover the block.

Output

This is the HTML paragraph inside the div for background position text. This div contains background image of globe. This background image has given position given in percentage.