Open In App

How to stretch and scale background image using CSS?

Last Updated : 03 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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

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



Similar Reads

CSS font-stretch Property
The font-stretch property in CSS is used to set the text wider or narrower. This property is not working any font. Its only work when font family has a width-variant face. Syntax: font-stretch: normal|ultra-condensed|extra-condensed|condensed| semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded; Default Value: normal Property Values
2 min read
How to stretch flexbox to fill the entire container in Bootstrap ?
We are given an HTML document (linked with Bootstrap) with a flexbox and a container. The goal is to stretch the flexbox to fill the entire container. This can be achieved by two different approaches, using flex-fill or flex-grow classes in Bootstrap. Approach 1: Using flex-fill class: The .flex-fill class stretches the width of an element to fill
3 min read
How to stretch div to fit the container ?
A child div inside a container can be made to take the complete width and height of the parent div. There are two methods to stretch the div to fit the container using CSS that are discussed below: Method 1: The first method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div. E
2 min read
How to Create a Wave Image for a Background using HTML and CSS ?
This type of background creates uniqueness on your webpage by avoiding regular rectangular sized background or header. The following header design will show your creativity. This design can be achieved in two ways: Using ::before and ::after selector on a div element in CSS.Using SVG in HTML. Example: This example uses ::before and ::after selector
3 min read
How to repeat background image vertically and horizontally using CSS ?
In this article, we are going to discuss the background image repeat property of CSS. Also, we are going to discuss how to repeat the background image in horizontal and vertical directions. The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will
2 min read
How to Add Image in Text Background using HTML and CSS ?
In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `&lt;div&gt;`), set its background to the desired image using CSS ('background-image property), and adju
2 min read
How to Modify the Fill Color of an SVG Image when being Served as Background Image ?
In this article, we will see how to modify the fill color of an SVG image when being served as a background image. SVGs also known as scalable vector images, While being served as a background image we can change their background color easily. It has a number of approaches like using HTML only or using CSS or JavaScript. For starters let's look at
5 min read
How to add an image as background image of a web page ?
In this article, we will be adding an image as the background image of a web page. Background images are used to make a website more interactive and attractive. It can be applied in many stylings. Approach: In the body tag, specify a background image in the background attribute by passing the URL of the image or location path.Adding CSS styling pro
2 min read
How to give text or an image transparent background using CSS ?
In this article, we will know to make the text or image a transparent background using the CSS &amp; will see its implementation through the example. The opacity property is used to set image or text transparent using CSS. The opacity attribute is used to adjust the transparency of text or pictures. The value of opacity lies between 0.0 to 1.0 wher
2 min read
Set the size of background image using CSS ?
The background-size property is used to set the background image size using CSS. Use height and width property to set the size of the background image. Syntax: background-size: width height; Note: If the first value is omitted then the image takes its original width. If the second value is omitted then the image takes its original height. Example 1
1 min read
Article Tags :