Computer >> Computer tutorials >  >> Programming >> Javascript

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


To set the size of the background image in JavaScript, use the backgroundSize property. It allows you to set the image size for the background.

Example

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>