CSS Background Position
How to set the background in the center of the page?
Set the background Image position in HTML.
Explanation
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. This will be more effective, if repeat type has been set as "no-repeat".
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.
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.
Examples
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><br><br><br></div>
Result:
color name
