The background-position property in CSS is mainly used to sets the initial position for the background image ie., it is used to set an image at a certain position. The position that is relative to the positioning layer, can be set by using the background-origin property.
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:
- background-position: left top: This property is used to set the image at the left top.
- background-position: left center :This property is used to set the image at the left center.
- background-position: left bottom; This property is used to set the image at the left bottom.
- background-position: center top; This property is used to set the image at the center top position.
- background-position: center center; This property is used to set the image at the center center position.
- background-position: center bottom; This property is used to set the image at the center bottom position.
- background-position: right top; This property is used to set the image at the right top position.
- background-position: right center; This property is used to set the image at the right center position.
- background-position: right bottom; This property is used to set the image at the right bottom position.
-
background-position: 25% 75%: This property is used to set the image at 25% from the left and 75% from the top.
- Note: For x%y% notation, here x% denotes the horizontal position & y% denotes the vertical position with respect to the initial position i.e, left top.
-
background-position: 30px 80px;: This property is used to set the image at the 30px from left and 80px from top.
- Note: For x-pos y-pos notation, here the units are represented in pixels or any other CSS units.
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
}
</style>
</head>
</html>
|
Output:
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left center;
}
</style>
</head>
</html>
|
Output:
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;
}
</style>
</head>
</html>
|
Output:
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
</style>
</head>
</html>
|
Output:
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
</html>
|
Output:
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
}
</style>
</head>
</html>
|
Output:
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}
</style>
</head>
</html>
|
Output:
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right center;
}
</style>
</head>
</html>
|
Output:
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
</style>
</head>
</html>
|
Output:
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(
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 25% 75&;
}
</style>
</head>
</html>
|
Output:
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(
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:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0