Open In App

HTML | DOM Style backgroundSize Property

Improve
Improve
Like Article
Like
Save
Share
Report

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"

Return Values: It returns a string value, which represents the background-size property of an element

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: 

html




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

html




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

html




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

html




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

html




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

html




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

html




<!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 3 and above
  • Edge 12 and above
  • Internet Explorer 9 and above
  • Firefox 4.0 and above
  • Safari 5 and above
  • Opera 10 and above


Last Updated : 09 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads