background-size

The background-size property allows you to change the size of the background image. If the background image does not match the size of the block, this property can be used to make the image occupy the entire area of the block or, on the contrary, be of a specific size.

Let's create a block and set a beautiful panorama as its background:

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          .element {  height: 100vh;  background-color: #f1f1f1;  background-image: url("landscape.jpg");  background-repeat: no-repeat;}
          .element {
  height: 100vh;
  background-color: #f1f1f1;
  background-image: url("landscape.jpg");
  background-repeat: no-repeat;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If the background-size property is not specified, only a small portion of the image will be visible. However, we would like the background to look good despite its non-standard size.

We will specify the background-size property with the value 100% 100%. Logically, with this value, the background should occupy 100% of the element's height and 100% of the element's width.

If you have a wide monitor, you might not notice the catch, but on narrow monitors, the image will deform and get squashed in width.

There is a way to make the image occupy the entire available area without deforming. We will set background-size: cover — cover translates from English as "cover."

In this version, the property background-position with the value center is also added so that the center of the image is in the field of view.

Now the image adjusts to the size of the element without deformation. The excess is simply trimmed. The value cover is used most often to create beautiful backgrounds.

The background-size property controls the size of the image within the element for which this image is set as the background.

As a value for the background-size property, you can set:

• An exact size in any units of measurement available on the web.
• Percentages. The size in percentages will be calculated based on the dimensions of the element.
• The keyword auto. The size of the image remains unchanged. By the way, this keyword is the default value.
• The keyword cover. The image scales without changing proportions to cover the background of the entire element. The shorter side of the image adjusts to the corresponding side of the element. The longer side covers the longer side of the element, and the rest that does not fit into the field of view is trimmed.
• The keyword contain. The image scales without changing proportions so that it fits entirely within the element.

Sizes in units of measurement or percentages can be combined with the keyword auto. The first value will represent the width of the background image, and the second one will represent the height.

The keyword auto in the case of a combination allows you to maintain the proportions of the image.

💡 The default value is auto.

💡 The property value is not inherited.

💡 The value cover is used most often. The second most popular value is contain. You can also often see the value 100% 100%, but one should be careful with it. Exact background sizes are rarely specified. It is not common to leave the default value.

💡 The background size property can be animated using the transition property 🥳

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          .element {  height: 100vh;  background-color: #18191C;  background-image: url("pattern.svg");  background-size: 100px auto;}
          .element {
  height: 100vh;
  background-color: #18191C;
  background-image: url("pattern.svg");
  background-size: 100px auto;
}

        
        
          
            
            Copy
            Copied
            Failed to copy