CSS - background-position-x Property
The background-position-x property sets the initial horizontal position of the element's background image. The position of the image is relative to the value set by background-origin property.
The value of background-position-x gets overridden if background or background-position declarations are made on the element after it.
Possible Values
The value for this property can be specified as one or more values, separated by commas.
left: Left edge of the background image is aligned with the left edge of background position layer.
center: Center of the background image is aligned with the center of the background position layer.
right: Right edge of the background image is aligned with the right edge of background position layer.
<length>: It is the offset of the left vertical edge of background image from the background position layer's left vertical edge.
<percentage>: It is the offset of the horizontal position of the background image relative to the containing element.
0%: left edge of the background image is aligned with left edge of the container.
100%: right edge of the background image is aligned with right edge of the container.
50%: horizontally centered background image.
Applies to
All the HTML elements.
DOM Syntax
object.style.backgroundPositionX = "left 50px";
CSS background-position-x - left Value
Here is an example where the image is positioned horizontally on the left:
<html> <head> <style> .position-x-left { background-image: url('images/tutimg.png'); background-position-x: left; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; } </style> </head> <body> <div class="position-x-left"></div> </body> </html>
CSS background-position-x - right Value
Here is an example where the image is positioned horizontally on the right:
<html> <head> <style> .position-x-right { background-image: url('images/tutimg.png'); background-position-x: right; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; } </style> </head> <body> <div class="position-x-right"></div> </body> </html>
CSS background-position-x - center Value
Here is an example where the image is positioned horizontally at center:
<html> <head> <style> .position-x-center { background-image: url('images/tutimg.png'); background-position-x: center; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; } </style> </head> <body> <div class="position-x-center"></div> </body> </html>
CSS background-position-x - <length> Value
Here is an example where the image is positioned horizontally using a length value:
<html> <head> <style> .position-x-length { background-image: url('images/tutimg.png'); background-position-x: 300px; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; } </style> </head> <body> <div class="position-x-length"></div> </body> </html>
CSS background-position-x - <percentage> Value
Here is an example where the image is positioned horizontally using a percentage value:
<html> <head> <style> .position-x-percent { background-image: url('images/tutimg.png'); background-position-x: 80%; background-repeat: no-repeat; width: 500px; height: 300px; border: 3px solid black; } </style> </head> <body> <div class="position-x-percent"></div> </body> </html>
To Continue Learning Please Login
Login with Google