Property:
Usage:
background-position: center | top | bottom | top left | top center | top right | bottom left | bottom center | bottom right ;
background-position: 50% 50%;
background-position: 200 200;
Definition:
This tag sets the position of the background image. The repeat should be of type no-repeat for this to take effect properly.
It takes the following values.
a)center | top center | ... : These values define in words where the image should be. It can be given as "top center" or "top left" or "top right" or like these
b)50% 50% : The values can be given in percentage as 50% 60%. This means the image should be placed at the position of 50% from left and 60% from top
c)200 200 : The values can be given in pixels.
All these values will be taken with respect to the object area.
If you set these values inside a div tag. The area 50 means, 50 from the beginning of div tag.
Example 1:
<div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat; background-position: bottom center;"> color name
<br><br><br></div>
Result:
color name
Example 2:
<div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat; background-position: 50% 50%;"> color name
<br><br><br></div>
Result:
color name
Example 3:
<div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat; background-position: 50 50;"> color name
<br><br><br></body>
Result:
color name
| 
