CSS background-position-x Property
The CSS background-position-x property is used to set the initial horizontal position for the background image i.e. it is used to set an image at a certain position in a horizontal direction. The position is relative to the positioning layer, which can be set by using the CSS background-origin property.
Syntax:
background-position-x: value;
Property Value:
- left: It is used to set the image at the left position.
- center: It is used to set the image at the horizontal center position.
- right: It is used to set the image in the right position.
- length: It is used to set the image at the horizontal position of the given length.
- percentage: It is used to set the image at the horizontal position in terms of percentage height.
- initial: It is used to set its default value. Its default value is 0%.
- inherit: It inherits this property value from its parent elements.
Example 1: The following code demonstrates the CSS background-position-x property. The image is visible on the left side.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>CSS background-position-x Property</title> <style> body { text-align: center; background-image: url( background-size: 500px; background-repeat: no-repeat; background-attachment: fixed; background-position-y: 30%; background-position-x: 30%; } h1 { color: green; } img { width: 100px; height: 100px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3> CSS background-position-x Property </h3> </body> </html> |
Output:
Example 2: The following code demonstrates the CSS background-position-x property showing the image on the right side.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>CSS background-position-x Property</title> <style> body { text-align: center; background-image: url( background-size: 500px; background-repeat: no-repeat; background-attachment: fixed; background-position-y: 30%; background-position-x: right; } h1 { color: green; } img { width: 100px; height: 100px; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3> CSS background-position-x Property </h3> </body> </html> |
Output:
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 49
- Opera 15
- Safari 1
Please Login to comment...