CSS background position is used to set the background image position inside the block.
Syntax
|
1 |
background-position: position value comes here; |
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .div-bg-position{ background-image:url(../../images/recycle1.png); min-height:200px; background-position:center center; color:#fff; } </style> <div class="div-bg-position"> <p>This is the HTML paragraph inside the div for background position text. This div contains a background image of the globe. This background image has given position center. The background center makes it at the center position in the block.</p> </div> |
Output
This is the HTML paragraph inside the div for background position text. This div contains a background image of the globe. This background image has given position center. The background center makes it at the center position in the block.
CSS background position values list
| 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 (20%, 50% etc.) |
| 8 | initial | Used to define as the property initial value. |
| 9 | inherit | Used to define the computed value of the property on the elements parent. |
Reference
The CSS background specification defines in this official webpage