CSS Background-Position Property

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.

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

Background-position: left top:

With the help of this property, we can set the image at the top left position of the webpage.

Background-position: left center:

With the help of this property, we can set the image at the centre-left position of the webpage.

background-position: left bottom:

With the help of this property, we can set the image at the bottom left position of the webpage.

background-position: center top:

With the help of this property, we can set the image at the centre-top position of the webpage.

background-position: center center:

With the help of this property, we can set the image at the centre position of the webpage.

background-position: center bottom:

With the help of this property, we can set the image at the centre bottom position of the webpage.

background-position: right top:

With the help of this property, we can set the image at the top right position of the webpage.

background-position: right center:

With the help of this property, we can set the image at the centre-right position of the webpage.

background-position: right bottom:

With the help of this property, we can set the image at the bottom right position of the webpage.

Background-position: 25% 75%:

With the help of this property, we can set the image at 25% from the left and 75% from the top of the webpage.

background-position: 30px 80px:

With the help of this property, we can set the image at 30px from the left and 80px from the top..of the webpage.

Example 1:

in the example below, we have created a div at the web page's top left position.

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 above code, we use the background-position: left top; So that the position of the image is shifted to the top left position of the webpage.

Example 2:

in the below example, we have created a div, which is present at the top centre position of the web page.

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 above code, we use the background position: top center; So that the position of the image is shifted to the top center position of the webpage.

Example 3:

in the below example, we have created a div, which is present at the left-centre position of the web page.

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 above code, we use the background-position: left centre So that the position of the image is shifted to the left centre position of the webpage.

Example 4:

in the below example, we have created a div, which is present at the left bottom position of the web page.

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 above code, we use the background-position: left button; So that the position of the image is shifted to the left bottom position of the webpage.

Example 5:

in the below example, we have created a div that is present at the centre position of the web page.

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 above code, we use the background-position: centre centre So that the position of the image is shifted to the centre position of the webpage.

Example 6:

in the below example, we have created a div that is present at the centre bottom position of the web page.

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 above code, we use the background-position: centre button; So that the position of the image is shifted to the centre button position of the webpage.

Example 7:

in the below example, we have created a div, which is present at the right top position of the web page.

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 above code, we use the background-position: right top So that the position of the image is shifted to the right top position of the webpage.

Example 8:

in the below example, we have created a div, which is present at the top right centre position of the web page.

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 above code, we use the background position: top right center; So that the position of the image is shifted to the top right center position of the webpage.

Example 9:

in the below example, we have created a div, which is present at the bottom right position of the web page.

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 above code, we use the background-position: right bottom So that the position of the image is shifted to the right bottom position of the webpage.

Example 10:

in the below example, we have created a div, which is present at the percentage position of the web page.

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 above code, we use the background position: centre center; So that the position of the image is shifted to the center center position of the webpage.

Example 11:

in the below example, we have created a div that is present at the pixel position of the web page.

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 above code, we use the background-position in pixel value so that the position of the image is shifted according to the pixel value position of the webpage.

Next TopicCSS Before and After

← prev next →