The background-position Property
The background-position CSS properties are used to set for<position> each background images. and this property is specified as one or more position values separated by commas.
background-position properties play important role in CSS to decorate your web pages design. you can set background images according to your need on your web HTML pages with the help of CSS properties. the background images set in the viewpoint of web pages on which portion you want to show your background images.
background-position properties values:
|
1 |
background-position: center; |
|
1 |
background-position: left; |
|
1 |
background-position: top; |
|
1 |
background-position: 30% 70%; |
|
1 |
background-position: right 25% bottom 60%; |
|
1 |
background-position: bottom 40px right 200px; |
set background-image to be center
|
1 2 3 4 5 6 |
body { background-image: url('background-image.png'); background-attachment: fixed; background-repeat: no-repeat; background-position: center; } |
set background-image to be left
|
1 2 3 4 5 6 |
body { background-image: url('background-image.png'); background-attachment: fixed; background-repeat: no-repeat; background-position: left; } |
set background-image to be top
|
1 2 3 4 5 6 |
body { background-image: url('background-image.png'); background-attachment: fixed; background-repeat: no-repeat; background-position: top; } |
| Value | Discription | |
|---|---|---|
| Center | In these background-position value can set the background position as according to your need. default value will be 0% 0% or 0px 0px | |
| Center top | ||
| Center center | ||
| Center bottom | ||
| left top | ||
| left center | ||
| left bottom | ||
| right top | ||
| right center | ||
| right bottom | ||
| initial | here, background-position property set to its default value | |
| inherit | Inherits this background-position property from its parent element. | |
| x% y% | x% indicates that the horizontal position (x-axis) value and the y% indicates the second value is the vertical position (y-axis). An universal value top left corner is 0% 0% means that Default value is: 0% 0% and the right bottom corner is 100% 100%. | |
| x-axis y-axis (in pixels) | The first value will be x-axis which is the horizontal position and the second value will be y-axis which is the vertical position. always The top left corner is 0 0. Units can be taken pixels (0px 0px) or percentage or any other CSS units. If you want to only specify one value, the other value will be 50%. | |
About Author
