Skip to content
Related Articles

Related Articles

HTML | DOM Style backgroundSize Property
  • Last Updated : 29 Jul, 2019

The HTML DOM Style backgroundSize Property is used to set or return the size of the background image.

Syntax:

  • To get the backgroundSize property
    object.style.backgroundSize
  • To set the backgroundSize property
    object.style.backgroundSize = "auto | length | percentage | 
    cover| contain |initial | inherit"

Property Values:

  • auto: This is used to display the background image in its original size. This is the default value.
  • length: This is used to set the height and width of the image. Both the values set the width and height respectively. If only one value is given, the other one is set to ‘auto’.
  • percentage: This sets the width and height in terms of percentage of the parent element. Both the values set the width and height respectively. If only one value is given, the other one is set to ‘auto’.
  • cover: This is used to scale the background image to cover the whole container element.
  • contain: This is used to scale the background image as large as possible such that both the height and width fit inside the container area.
  • initial: This is used to set this property to its default value.
  • inherit: This inherits the background size property from its parent.
  1. auto: This is used to display the background image in its original size it’s default value.

    Example:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundSize Property</title>
        <style>
            .bg-img {
                height: 200px;
                width: 200px;
                border-style: solid;
                background-image: url(
                background-repeat: no-repeat;
                /* we set the size ourselves to demonstrate auto */
                background-size: 100px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundSize Property</b>
        <p>Click on the button to 
          change the size of the background image</p>
        <div class="bg-img"></div>
        
        <button onclick="changePos()">Change size of image</button>
      
        <script>
            function changePos() {
                elem = document.querySelector('.bg-img');
      
                // Setting size to auto
                elem.style.backgroundSize = 'auto';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:



    • Before pressing the button:

      auto-before

    • After pressing the button:

      auto-after

  2. length: This is used to set the height and width of the image. Both the values set the width and height respectively. If only one value is given, the other one is set to ‘auto’.

    Example:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundSize Property</title>
        <style>
            .bg-img {
                height: 200px;
                width: 200px;
                border-style: solid;
                background-image: url(
                background-repeat: no-repeat;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundSize Property</b>
        <p>Click on the button to 
          change the size of the background image</p>
        
        <div class="bg-img"></div>
        <button onclick="changePos()">Change size of image</button>
      
        <script>
            function changePos() {
                elem = document.querySelector('.bg-img');
      
                // Setting size to 200px in width
                // and 50px in height
                elem.style.backgroundSize = 
                  '200px 50px';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    • Before pressing the button:

      before-button

    • After pressing the button:

      length-after

  3. percentage: This sets the width and height in terms of percentage of the parent element. Both the values set the width and height respectively. If only one value is given, the other one is set to ‘auto’.

    Example:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundSize Property</title>
        <style>
            .bg-img {
                height: 200px;
                width: 200px;
                border-style: solid;
                background-image: url(
                background-repeat: no-repeat;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks
       </h1>
        <b>DOM Style backgroundSize Property</b>
        <p>Click on the button to 
          change the size of the background image</p>
        
        <div class="bg-img"></div>
        <button onclick="changePos()">
          Change size of image
        </button>
      
        <script>
            function changePos() {
                elem = document.querySelector('.bg-img');
      
                // Setting size to 25% in width and 50% in height
                elem.style.backgroundSize = '25% 50%';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:



    • Before pressing the button:

      before-button

    • After pressing the button:

      percentage-after

  4. cover: This is used to scale the background image to cover the whole container element.

    Example-4:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundSize Property</title>
        <style>
            .bg-img {
                height: 200px;
                width: 200px;
                border-style: solid;
                background-image: url(
                background-repeat: no-repeat;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundSize Property</b>
        <p>Click on the button to 
          change the size of the background image</p>
        
        <div class="bg-img"></div>
        <button onclick="changePos()">Change size of image</button>
      
        <script>
            function changePos() {
                elem = document.querySelector('.bg-img');
      
                // Setting size to cover
                elem.style.backgroundSize = 'cover';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    • Before pressing the button:

      before-button

    • After pressing the button:

      cover-after

  5. contain: This is used to scale the background image as large as possible such that both the height and width fit inside the container area.

    Example-5:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundSize Property</title>
        <style>
            .bg-img {
                height: 200px;
                width: 200px;
                border-style: solid;
                background-image: url(
                background-repeat: no-repeat;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundSize Property</b>
        
        <p>Click on the button to 
          change the size of the background image</p>
        <div class="bg-img"></div>
        
        <button onclick="changePos()">
          Change size of image
      </button>
      
        <script>
            function changePos() {
                elem = document.querySelector('.bg-img');
      
                // Setting size to contain
                elem.style.backgroundSize = 'contain';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    • Before pressing the button:

      before-button

    • After pressing the button:

      contain-after

  6. initial: This is used to set this property to its default value.

    Example-6:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundSize Property</title>
        <style>
            .bg-img {
                height: 200px;
                width: 200px;
                border-style: solid;
                background-image: url(
                background-repeat: no-repeat;
                
                /* we set the size ourselves to demonstrate initial */
                background-size: 100px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundSize Property</b>
        <p>Click on the button to 
          change the size of the background image</p>
        
        <div class="bg-img"></div>
        <button onclick="changePos()">
          Change size of image
        </button>
      
        <script>
            function changePos() {
                elem = document.querySelector('.bg-img');
      
                // Setting size to initial
                elem.style.backgroundSize = 'initial';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    • Before pressing the button:

      initial-before

    • After pressing the button:

      initial-after

  7. inherit: This inherits the background size property from its parent.

    Example-7:




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>DOM Style backgroundSize Property</title>
        <style>
            .bg-img {
                height: 200px;
                width: 200px;
                border-style: solid;
                background-image: url(
                background-repeat: no-repeat;
            }
              
            #parent {
                background-size: 100px 200px;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">GeeksforGeeks</h1>
        <b>DOM Style backgroundSize Property</b>
        <p>Click on the button to 
          change the size of the background image</p>
      
        <div id="parent">
            <div class="bg-img"></div>
        </div>
      
        <button onclick="changePos()">
          Change size of image
       </button>
      
        <script>
            function changePos() {
                elem = document.querySelector('.bg-img');
      
                // Setting size to inherit
                elem.style.backgroundSize = 'inherit';
            }
        </script>
    </body>
      
    </html>

    
    

    Output:

    • Before pressing the button:

      before-button

    • After pressing the button:

      inherit-after

Supported Browsers: The browser supported by backgroundSize Property are listed below:

  • Chrome 4.0
  • Internet Explorer 9.0
  • Firefox 4.0
  • Safari 4.1
  • Opera 10.5

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :