CSS background-position

CSS background-position is used to set the background image position inside the block. CSS background image can be used to give the background of a block. This image can be any format like jpg, png etc. You should also see CSS background-attachment.

The syntax for CSS background-position is:

For Example:

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 center. The background center make it at the center position inside the block.

CSS background-position values list

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

Sr. No.valueDescription
1leftUsed to make background image to the left position of the block.
2rightUsed to make background image to the right position of the block.
3topUsed to make background image to the top position of the block.
4bottomUsed to make background image to the bottom position of the block.
5centerUsed to make background image to the center position of the block.
6position in pxUsed to give background image position value in px e.g. 20px, 50px etc.
7position in percentageUsed to give background image position value in percentage e.g. 20%, 50% etc.
8initialUsed to define as the property initial value.
9inheritUsed to define the computed value of property on the elements parent.

CSS background-position in percentage

In this example we will use CSS background-position value to give in percentage.

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.