How to set the size of the background image with JavaScript?

In this tutorial, we will look at the method to set the size of a background image with JavaScript.

Background effects on a webpage enhance its look. We can set a background color or a background image to enhance the feel of the webpage. We can also change the background properties, like its size or color.

To enhance the feel, the image must fit in the right position with the right size. Generally, we do this by using CSS, but JavaScript DOM also provides properties to do so.

So, let us look at how to set the size of the background image.

Following are the property by which we can set the size of the background image with JavaScript −

  • backgroundSize property

Using the backgroundSize Property

JavaScript DOM provides us with a way to design our page in run-time. We can even apply an image to the background and change its size. The background-size property of JavaScript sets the size of the background image.

If we set like backgroundSize = "100px", then the width of the background image will set to 100px and the height will adjust to auto.

If we set like backgroundSize = "100px 200px", then the width of the background image will set to 100px and the height will set to 200px.

All the users can follow the below syntax to use the backgroundSize property to set the size of the background image using JavaScript −

Syntax

document.body.style.backgroundImage = "url(' <image address here> ')";
document.body.style.backgroundSize = "auto || Length || Percentage || Cover || Contain || Initial || Inherit";

Parameters

  • auto − Displays the image to its original size (Default value).
  • Length − Can be used to set both height and width. The other will be set to auto if only one dimension is provided.
  • Percentage − Set height and width in the percentage
  • Cover − Set the image such that the image can cover the whole element.
  • Contain − Set the number of images as possible within a parent.
  • Initial − Set to the Default value.
  • Inherit − Inherits the parent property.

Example 1

You can try to run the following code to learn how to set the size of the background image −

<!DOCTYPE html>
<html>
<head>
<style>
   #box {
      border: 2px dashed blue;
      width: 600px;
      height: 400px;
      background:
      url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
   }
</style>
</head>
<body>
   <button onclick="display()">Set size of background image</button>
   <div id="box">
   </div>
   <script>
      function display() {
         document.getElementById("box").style.backgroundSize="150px 200px";
      }
   </script>
</body>
</html>

We can set the image sizeof the background image by clicking the bottom "Set size of background image".

Example 2

In the example below, we used the backgroundSize property to set the size of the background image. The image has been applied to the div using CSS and will change its shape on clicking a button and will return to its original shape if clicked again.

<html>
<head>
<style>
   #image_div{
      width: 40%;
      height: 30%;
      background-image:
      url(https://www.tutorialspoint.com/images/logo.png);
   }
   #btn{
      padding: 5px;
      margin: 5px;
   }
</style>
</head>
<body>
   <h2> Use <i> backgroundSize </i> to set the size of the background image
   </h2>
   <div id="image_div"> </div>
   <button id="btn">
   Click to apply the background image and change its size
   </button>
   <script>
   var element=document.getElementById("btn");
   var div=document.getElementById("image_div");
   element.addEventListener("click",changeShape);
   function changeShape(){
      if(!div.style.backgroundSize){
         div.style.backgroundSize="100% 100%";
      } else {
         div.style.backgroundSize=null;
      }
   }
   </script>
</body>
</html>

In the above example, users can see that we have used the backgroundSize property to set the background image size after clicking a button applied on a container.

Example 3

In the below example, we will accept two values of the image for width and height from the user. We also accept the parameter of the value (em, px, %, and cm) through a radio button. First, we will take an integer value from the user and append the selected parameter to it. After clicking a button, we will run a function that will set the size of the background image as a value given by the user.

<html>
<head>
<style>
   #container{
      width: 90%;
      height: 90%;
      background-image:
      url(https://www.tutorialspoint.com/images/logo.png);
      padding: 10px;
      margin: 10px;
   }
</style>
</head>
<body>

   <h3> Use <i> backgroundSize </i> to set the size of the background image </h3>
   <div id="container">
   </div>
   <label for="w_input"> Width(only integer)(required) : </label>
   <input type="text" name="value1" id="w_input"/> <br>
   <label for="h_input"> Heigth(only integer)(optional) : </label>
   <input type="text" name="value2" id="h_input"/> <br>
   <input type="radio" name="radio_btn" id="pixel" value="px"/>
   <label for="pixel"> px </label> <br>
   <input type="radio" name="radio_btn" id="emph" value="em"/>
   <label for="emph"> em </label> <br>
   <input type="radio" name = "radio_btn" id="percent" value="%"/>
   <label for="percent"> % </label> <br>
   <input type="radio" name="radio_btn" id="centime" value="cm"/>
   <label for="centime"> cm </label> <br>
   <button id="btn"> Set background Image size </button>
   <script>
      var element=document.getElementById("container");
      var button=document.getElementById("btn");
      button.addEventListener("click", set_Size);
      function set_Size(){
         var width=document.getElementById("w_input").value;
         var heigth=document.getElementById("h_input").value;
         var radio_selected=document.querySelector('input[name="radio_btn"]:checked');
         var width_length=width + radio_selected.value;
         if(heigth){
            var heigth_length=heigth + radio_selected.value;
            var width_heigth=width_length + " " + heigth_length;
         } else {
            var width_heigth=width_length;
         }
         element.style.backgroundSize=width_heigth;
      }
   </script>
</body>
</html>

In the above example, users can see that we have changed the size of the background images within a container by clicking the button.

In this tutorial, we learned to set the background image size with JavaScript.

Updated on: 22-Nov-2022

4K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements