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:
|
1 |
background-position: position value comes here; |
For Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>CSS background-position syntax</title> <style> .div-bg-position{ background-image:url(../../images/recycle1.png); min-height:200px; background-position:center center; } </style> </head> <body> <div class="div-bg-position"> <p>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.</p> </div> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>CSS background-position syntax</title> <style> .div-bg-position{ background-image:url(../../images/recycle1.png); min-height:200px; background-position:20% 60%; } </style> </head> <body> <div class="div-bg-position"> <p>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.</p> </div> </body> </html> |
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.