background-position

Using the background-position property, you can control the position of the background image within an element.

If the background image (background-image) is smaller than the element, and automatic background repetition (background-repeat) is disabled, by default it will be positioned in the top left corner.

        
          
          <div class="element"></div>
          <div class="element"></div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          .element {  background-color: #49a16c;  background-image: url("doggo.png");  background-repeat: no-repeat;}
          .element {
  background-color: #49a16c;
  background-image: url("doggo.png");
  background-repeat: no-repeat;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

As seen in the example, the small image with the character is located in the top left corner. But logically, we need to position this image in the bottom right corner.

To do this, we will change the value of the background-position property to what we need: 100% 100% or bottom right. They are equivalent.

Position in percentage:

        
          
          .element {  background-position: 100% 100%;}
          .element {
  background-position: 100% 100%;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Or using keywords:

        
          
          .element {  background-position: bottom right;}
          .element {
  background-position: bottom right;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Available words are center, bottom, left, right. They can be combined, for example: left center — center on the left side; right bottom — bottom right corner. If we want to position the image centered horizontally and vertically, the second word center can be omitted.

Top left corner:

        
          
          .element {  background-position: left top;}
          .element {
  background-position: left top;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Center-center:

        
          
          .element {  background-position: center;}
          .element {
  background-position: center;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Center horizontally and at the bottom edge:

        
          
          .element {  background-position: center bottom;}
          .element {
  background-position: center bottom;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can specify the exact position of the image in the block.

10 px from the left edge and 150 px from the top edge:

        
          
          .element {  background-position: 10px 150px;}
          .element {
  background-position: 10px 150px;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

1 rem from the left edge and centered between the top and bottom:

        
          
          .element {  background-position: 1rem;}
          .element {
  background-position: 1rem;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

15 width units from the left edge and 25 height units from the top:

        
          
          .element {  background-position: 15vw 25vh;}
          .element {
  background-position: 15vw 25vh;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

For this property, percentages are calculated in a way that is unusual for CSS: from the difference between the size of the element and the size of the background image itself. Shifting the image by 50%, that is, half of that difference, centers it along the corresponding axis. The value 0% 0% places the image in the top left corner, while 100% 100% — in the bottom right.

Bottom right corner:

        
          
          .element {  background-position: 100% 100%;}
          .element {
  background-position: 100% 100%;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Center-center:

        
          
          .element {  background-position: 50% 50%;}
          .element {
  background-position: 50% 50%;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

15% from the left, 5% from the top:

        
          
          .element {  background-position: 15% 5%;}
          .element {
  background-position: 15% 5%;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If we break down the recording 15% 5% in more detail, it becomes clearer how percentages work in this case:

• There is 15% of free space to the left of the image, and the remaining 85% is on the right.
• There is 5% of free space above the image, and the remaining 95% is below it.

💡 The background position property is not inherited.

💡 Keywords can be specified in any order. In other cases, the first value is the position horizontally, and the second, if present — vertically.

💡 The default value is 0% 0% (top left corner).

💡 If only one value is specified, the second is automatically set to 50%. That is, the value 100% will position the image at the center of the right edge.

💡 If the image is larger than the block, the difference in their sizes, from which percentages are calculated, becomes negative, so they shift the image not to the right and down, but to the left and up. However, 50% 50% in this case also centers the image with the center of the element, and 100% 100% aligns the bottom right corner of the image with the bottom right corner of the element.

💡 If the image occupies all the space of the block, then background-position with keywords or percentages will have no effect (percentages will be counted from zero). However, it is customary to specify it, so that in case of replacing the image, the new image is positioned in the center of the block.

💡 Changing the background position can be animated using the transition property 🥳

In practice

Copy the link "In practice"

Advice 1

Copy the link "Advice 1"

🛠 In work, it is rarely required to place small background images in large blocks. It is now common to create beautiful backgrounds that span the entire width. However, for any backgrounds, it is advisable to specify background-position: center or background-position: 50% 50% — as a safeguard against a fatal layout break.

🛠 You may encounter the following notation: background-position: right 20px bottom 10px;. In this case, the offset will be measured not from the top left corner, but from the specified side using the keyword. In this case, the image will be positioned twenty pixels from the right edge and ten pixels from the bottom edge.

🛠 In addition to the listed options, you can use the function calc() to specify a more flexible value.

+ Open