CSS background-size

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.valueDescription
1autoUsed to automatically determine the width and height of background image size inside block.
2containUsed to make background image to fit the block.
3coverUsed to make background image to cover the whole block or background area.
4length in pxUsed to give background image width and height in pixel inside block.
5length in percentageUsed to make background image width and height in percentage inside block.
6initialUsed to define as the property initial value.
7inheritUsed 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.