CSS background-position Property
The CSS background-position property sets the starting position of a background image. It can use keywords, percentages, or length values to precisely place the image within an element, allowing for customization of the visual layout and alignment of backgrounds.
Syntax:
background-position: value;
Note: The background-image is placed default to the top-left corner of an element with a repetition on both horizontally & vertically.
Property values:
| Property | Description |
|---|---|
background-position: left top; | This property sets the image at the left top position. |
background-position: left center; | This property sets the image at the left center position. |
background-position: left bottom; | This property sets the image at the left bottom position. |
background-position: center top; | This property sets the image at the center top position. |
background-position: center center; | This property sets the image at the center center position. |
background-position: center bottom; | This property sets the image at the center bottom position. |
background-position: right top; | This property sets the image at the right top position. |
background-position: right center; | This property sets the image at the right center position. |
background-position: right bottom; | This property sets the image at the right bottom position. |
background-position: 25% 75%; | This property sets the image at 25% from the left and 75% from the top. |
background-position: 30px 80px; | This property sets the image at 30px from the left and 80px from the top. |
Table of Content
- background-position: left top
- background-position: left center
- background-position: left bottom
- background-position: center top
- background-position: center center
- background-position: center bottom
- background-position: right top
- background-position: right center
- background-position: right bottom
- background-position: X% Y%
- background-position: Xpx Ypx
we will see each CSS background-position Property with their examples:
background-position: left top
The background-position: left top; property places the background image at the top-left corner of the element, aligning it with the element’s top and left edges.
Example: This example illustrates the use of background-position property where the position value is set to the left top.
<!DOCTYPE html>
<html>
<head>
<title> CSS background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
</style>
</head>
</html>
Output:
background-position: left center
The background-position: left center; property places the background image at the center left of the element, aligning it vertically centered and horizontally to the left.
Example: This example illustrates the use of background-position property where the position value is set to the left center.
<!DOCTYPE html>
<html>
<head>
<title> CSS background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left center;
}
</style>
</head>
</html>
Output:
background-position: left bottom
The background-position: left bottom; property places the background image at the bottom-left corner of the element, aligning it with the element’s bottom and left edges.
Example: This example illustrates the use of background-position property where the position value is set to the left bottom position.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;
}
</style>
</head>
</html>
Output:
background-position: center top
The background-position: center top; property places the background image at the top center of the element, aligning it horizontally centered and at the top edge.
Example: This example illustrates the use of background-position property where the position value is set to the center top position.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
</style>
</head>
</html>
Output:
background-position: center center
The background-position: center center; property places the background image at the exact center of the element, aligning it both horizontally and vertically centered.
Example: This example illustrates the use of background-position property where the position value is set to the center center position.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
</html>
Output:
background-position: center bottom
The background-position: center bottom; property places the background image at the bottom center of the element, aligning it horizontally centered and at the bottom edge.
Example: This example illustrates the use of background-position property where the position value is set to the center bottom position.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
}
</style>
</head>
</html>
Output:
background-position: right top
The background-position: right top; property places the background image at the top-right corner of the element, aligning it with the element’s top and right edges.
Example: This example illustrates the use of background-position property where the position value is set to the right top position.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}
</style>
</head>
</html>
Output:
background-position: right center
The `background-position: right center;` property places the background image at the center right of the element, aligning it vertically centered and horizontally to the right.
Example: This example illustrates the use of background-position property where the position value is set to the right center position.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right center;
}
</style>
</head>
</html>
Output:
background-position: right bottom
The background-position: right bottom; property places the background image at the bottom-right corner of the element, aligning it with the element’s bottom and right edges.
Example: This example illustrates the use of background-position property where the position value is set to the right bottom position.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
</style>
</head>
</html>
Output:
background-position: X% Y%
The background-position: X% Y%; property positions the background image using percentage values, where X% denotes horizontal and Y% denotes vertical position relative to the element’s top-left corner.
Example: This example illustrates the use of background-position property where the position value is set in the form of a percentage.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 25% 75&;
}
</style>
</head>
</html>
Output:
background-position: Xpx Ypx
The background-position: Xpx Ypx; property positions the background image using pixel values, where Xpx specifies the horizontal and Ypx the vertical position from the element’s top-left corner.
Example: This example illustrates the use of background-position property where the position value is set in the form of pixels.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.net/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30px 80px;
}
</style>
</head>
</html>
Output:
Supported Browsers: The browser supported by the background-position property are listed below:
Contact Us