Skip to content
Related Articles

Related Articles

How to stretch and scale background image using CSS?
  • Last Updated : 27 Feb, 2019

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

Syntax:

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

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

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




<!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(
             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(
             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(
             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.




<!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(
             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(
             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(
             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>


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :