How to stretch and scale background image using CSS? - GeeksforGeeks

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(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.
<!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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)