CSS background-position Property - GeeksforGeeks

22 Oct, 2021
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.
Example: This example illustrates the use of background-position property where the position value is set to the left top.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: left top;    }    </style></head>   <body></body></html>
Output:
background-position: left center;: This property is used to set the image at the left center.
Example: This example illustrates the use of background-position property where the position value is set to the left center.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: left center;    }    </style></head><body></body></html>
Output:
background-position: left bottom;: This property is used to set the image at the left bottom.
Example: This example illustrates the use of background-position property where the position value is set to the left bottom position.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: left bottom;    }    </style></head><body></body></html>
Output:
background-position: center top;: This property is used to set the image at the center top position.
Example: This example illustrates the use of background-position property where the position value is set to the center top position.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: center top;    }    </style></head><body></body></html>
Output:
background-position: center center;: This property is used to set the image at the center center position.
Example: This example illustrates the use of background-position property where the position value is set to the center center position.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: center center;    }    </style></head><body></body></html>
Output:
background-position: center bottom;: This property is used to set the image at the center bottom position.
Example: This example illustrates the use of background-position property where the position value is set to the center bottom position.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: center bottom;    }    </style></head><body></body></html>
Output:
background-position: right top;: This property is used to set the image at the right top position.
Example: This example illustrates the use of background-position property where the position value is set to the right top position.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: right top;    }    </style></head><body></body></html>
Output:
background-position: right center;: This property is used to set the image at the right center position.
Example: This example illustrates the use of background-position property where the position value is set to the right center position.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: right center;    }    </style></head><body></body></html>
Output:
background-position: right bottom;: This property is used to set the image at the right bottom position.
Example: This example illustrates the use of background-position property where the position value is set to the right bottom position.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: right bottom;    }    </style></head><body></body></html>
Output:
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.
Example: This example illustrates the use of background-position property where the position value is set in the form of a percentage.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: 25% 75&;    }    </style></head><body></body></html>
Output:
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 in the form of pixels.
HTML
<!DOCTYPE html><html><head>    <title> CSS | background-position Property </title>    <style>    body {        background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");        background-repeat: no-repeat;        background-attachment: fixed;        background-position: 30px 80px;    }    </style></head><body></body></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
arorakashish0911
ManasChhabra2
bhaskargeeksforgeeks
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills