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. value Description
1 left Used to make background image to the left position of the block.
2 right Used to make background image to the right position of the block.
3 top Used to make background image to the top position of the block.
4 bottom Used to make background image to the bottom position of the block.
5 center Used to make background image to the center position of the block.
6 position in px Used to give background image position value in px e.g. 20px, 50px etc.
7 position in percentage Used to give background image position value in percentage e.g. 20%, 50% etc.
8 initial Used to define as the property initial value.
9 inherit Used 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.