Introduction
In CSS, we can use the background-position property to specify the position of the background image. We can set the position of the image at a particular position. The position we have provided is related to the position layer of the background image.
Syntax:
We can implement the background property with the help of the below syntax.
background-position: value;
NOTE: The CSS sets the default value for the background-position in the top-left corner of an element, which is repeated both horizontally & vertically.
Properties Value
The background-position property specifies the starting position of a background image. It is set to display the image from the top left corner.
By utilizing this feature, we have the ability to position the image in the upper left corner of the web page.
- Background-position: left center:
By utilizing this attribute, we are able to position the image at the center-left of the web page.
- background-position: left bottom;
By utilizing this feature, we have the ability to position the image at the lower left corner of the webpage.
- background-position: center top;
By utilizing this attribute, it becomes possible to position the image in the middle of the top section on the webpage.
- background-position: center center;
By utilizing this feature, we can position the image in the center of the web page.
- background-position: center bottom;
By utilizing this feature, we can position the image at the bottom center of the webpage.
- background-position: right top;
By utilizing this attribute, we have the capability to position the image at the top right corner of the web page.
- background-position: right center;
With this feature, we are able to position the image in the center-right of the web page.
- background-position: right bottom;
By utilizing this feature, we are able to position the image in the lower right corner of the webpage.
- Background-position: 25% 75%:
With this feature, we can position the image 25% from the left and 75% from the top of the web page.
- background-position: 30px 80px;
By utilizing this attribute, we can position the image 30 pixels from the left and 80 pixels from the top of the webpage.
Example 1:
In the instance provided, a div element has been generated at the upper left corner of the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.example {
width: 300px;
height: 200px;
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: left top;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
Output
Explanation:
In the code snippet above, we employ the background-position property with a value of left top. This adjustment shifts the image's placement to the top left corner of the webpage.
Example 2:
In this example, a div element has been generated and is situated at the upper center location of the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.example {
width: 300px;
height: 200px;
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: top center;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we utilize the background position property with a value of top center. This adjustment causes the image to be aligned to the top center position on the webpage.
Example 3:
In this example, a div element has been generated and positioned at the center-left of the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.example {
width: 300px;
height: 200px;
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: left center;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
Output
Explanation:
In the provided code snippet, the background-position property is set to left center in order to align the image towards the left center of the webpage.
Example 4:
in the following instance, a div element has been generated and is located at the bottom left corner of the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.example {
width: 300px;
height: 200px;
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: left bottom;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we utilize the background-position: left setting to shift the image's placement to the bottom left corner of the webpage.
Example 5:
in this instance, a div element has been generated and positioned at the center of the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.example {
width: 300px;
height: 200px;
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
background-position: center center;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we utilize the background-position property with the values of center center to adjust the image's placement to the central position within the webpage.
Example 6:
in this example, a div element has been generated and positioned at the bottom center of the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.example {
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
width: 100%; /* Set a width for the div */
height: 500px; /* Set a height for the div */
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
Output
Explanation:
In the code snippet provided, we utilize the background-position: center property to adjust the image's placement to the center of the webpage.
Example 7:
In this example, we've generated a div element positioned at the top right corner of the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end; /* Align content to the right side */
align-items: flex-start; /* Align content to the top */
min-height: 100vh; /* Ensure the body takes at least the viewport height */
}
.top-right-div {
background-color: #f0f0f0;
padding: 10px;
position: absolute;
top: 10px; /* Adjust this value to control vertical position */
right: 10px; /* Adjust this value to control horizontal position */
}
</style>
</head>
<body>
<div class="top-right-div">
This is a div in the top right corner.
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we utilize the background-position: right top property to adjust the placement of the image to the top-right corner of the webpage.
Example 8:
in the following instance, a div element has been generated and is positioned at the top right center of the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end; /* Align content to the right side */
align-items: center; /* Align content vertically centered */
min-height: 100vh; /* Ensure the body takes at least the viewport height */
}
.top-right-div {
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); /* Replace with your image URL */
background-position: right center; /* Set background position */
background-repeat: no-repeat;
padding: 10px;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="top-right-div">
This is a div in the top right corner.
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, the background position: top right center; is employed to adjust the image's placement to the center of the top right corner on the webpage.
Example 9:
in this instance, a division has been generated and is positioned at the bottom right corner of the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top-right-div {
width: 300px;
height: 200px;
background-color: light gray; /* Temporary background color for visibility */
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-position: right bottom;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="top-right-div">
This is a div in the top right corner.
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we utilize the background-position property with a value of right bottom to adjust the image's placement to the bottom right corner of the webpage.
Example 10:
in this instance, a div element has been generated, positioned within the web page based on a percentage value.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top-right-div {
width: 300px;
height: 200px;
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-position: 100% 100%; /* 100% from the right and 100% from the bottom */
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="top-right-div">
This is a div, which is an example of a background position.
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we utilize the background position: centre center; This ensures that the image is aligned to the center of the webpage.
Example 11:
in this illustration, a div element has been generated and is located at a specific pixel coordinate on the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.top-right-div {
width: 300px;
height: 200px;
background-image: url("https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-position: 30px 80px; /* 100% from the right and 100% from the bottom */
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="top-right-div">
This is a div, which is an example of a background position.
</div>
</body>
</html>
Output
Explanation:
In the provided code snippet, we utilize the background-position property with pixel values to adjust the image's placement based on the pixel coordinates of the webpage.