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
Article Tags :
Recommended Articles