How to stretch and scale background image using CSS?

Last Updated : 03 Aug, 2023

The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties.

Syntax:

background-size: auto|length|cover|contain|initial|inherit;

cover: This property value is used to stretch the background-image in x and y directions and cover the whole area.
length: This property value is used to scale the background-image. It changes the background-image size. The length value can be in the form of px, em, % etc.

Example 1: This example stretches the background-image in x and y direction.

html

<!DOCTYPE html>
<html>
   <head>
      <style>
       
         /*background-size: 100% auto with no repeat */
         #example1 {
             width:600px; /* screen width */
             height:200px; /* screen height */
             border: 2px solid black;
             background: url(
https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png);
             background-repeat: no-repeat;
             background-size: 100% auto;
         }
         /*background-size:auto with no repeat*/
         #example2 {
             width:600px; /* screen width */
             height:200px; /* screen height */
             border: 2px solid black;
             background: url(
https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png);
             background-repeat: no-repeat;
             background-size: auto;
         }
         /* background-size: cover with no repeat */
         #example3 {
             border: 2px solid black;
             width:600px; /* screen width */
             height:200px; /* screen height */
             background: url(
https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png);
             background-repeat: no-repeat;
             background-size: cover;
         }
      </style>
   </head>
    
   <body>
      <h2>background-size: 100% auto :</h2>
      <p>
          The background image is displayed
          in its original size.
      </p>
      <div id="example1"></div>
       
      <h2>background-size: auto (default):</h2>
      <p>The background image is set to auto.</p>
      <div id="example2"></div>
       
      <h2>background-size: cover:</h2>
      <p>
          The background image is set to cover
          to specified area.
      </p>
      <div id="example3"></div>
       
   </body>
</html>

Output:

Example 2: This example scales the background-image.

html

<!DOCTYPE html>
<html>
   <head>
      <style>
       
         /*background-size: initial with no repeat */
         #example1 {
             width:600px;/* screen width */
             height:200px;/* screen height */
             border: 2px solid black;
             background: url(
https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png);
             background-repeat: no-repeat;
             background-size: initial;
         }
          
         /*background-size: contain with repeat */
         #example2 {
             border: 2px solid black;
             width:600px;/* screen width */
             height:200px;/* screen height */
             background: url(
https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png);
             background-size: contain;
         }
          
         /*background-size: 300px 100px with no repeat */
         #example3 {
             border: 2px solid black;
             width:600px;/* screen width */
             height:200px;/* screen height */
             background: url(
https://media.geeksforgeeks.org/wp-content/uploads/Screenshot-45-8.png);
             background-repeat: no-repeat;
             background-size: 300px 100px;
         }
      </style>
   </head>
    
   <body>
      <h2>background-size: initial:</h2>
      <p>The background image is set to initial.</p>
      <div id="example1"></div>
       
      <h2>background-size: contain:</h2>
      <p>The background image is set to contain.</p>
      <div id="example2"></div>
       
      <h2>background-size: 300px 100px:</h2>
      <p>The background image is set in pixel size.</p>
      <div id="example3"></div>
   </body>
</html>