How to change background image of an element using JavaScript

The CSS background-image property is used to set background images of an element. You can add a single image or multiple images to an element using this property. In this tutorial, I'll show you how to change background image of a DIV element dynamically using JavaScript.

Add Background image of an Element using CSS

First, let's see how to add background image to an element (like a DIV element) using the CSS background-image property.

<style>
  div { 
    padding: 100px;
    background-image: url('../../images/theme/javascript.png');
    background-repeat: no-repeat;
    background-size: 70px 70px;
    border:solid 1px #ddd;
  }
</style>

<body>
  <div>
    some content here...
  </div>
</body>

Try it

👉 In the above example, along with the background-image, I have also used background-repeat and background-size properties. These properties are important when applying a background image to an element.

The background-repeat property ensures that the image does not tile or repeat, while the background-size property controls the dimensions of the image so it fits the element appropriately.

➡️ CSS background properties

Change background image dynamically

Now, let's see how we can apply background image to the DIV element dynamically using JavaScript.

<body>
  <div id='dv'>
    some content here...
  </div>
</body>

<script>
let setbackground = () => {
    let el = document.getElementById('dv');
    el.style.backgroundImage = "url('../../images/theme/easy-image-resizer.jpg')";
    el.style.backgroundRepeat = "no-repeat";
    el.style.backgroundSize = "70px 70px";
}

setbackground();
</script>

Try it

Note: The properties are case-sensitive.

To change the background of an HTML element dynamically, you can use the backgroundImage property of the style object.

The style object represents an element's style statements.

The "backgroundImage" property is one of the many properties of the "style" object that you can use in JS to get or set style statements of an element.

🖼️ If your image is too large, consider resizing it first with our Resize Multiple Images tool.

Set Background Image Position

Sometimes you need to position the background image inside the element, dynamically.

Let us assume, I have a DIV element, which is "300px" by "300px" (width and height). However, the image resolution is bigger and wider that the elements size. I do not want to squeeze the image.

I can "position" the background image using this style object property.

<!DOCTYPE html>
<html>
<head>
<style>
  * { font-family: Calibri;   }
  div { 
    width: 300px;
    height: 300px;
    border:solid 1px #ddd;
    text-align: center;
    color: #fff;
  }
</style>
</head>

<body>
  <div id='dv'>
    A boy in a park with a puppy
  </div>
</body>

<script>
  let setbackground = () => {
     let el = document.getElementById('dv');
     el.style.backgroundImage = 
        "url('https://www.encodedna.com/bing/copilot-3d-image-powered-by-dall-e.png')";
     el.style.backgroundPosition = "-150px 285px";      // position the background image.
  }

  setbackground();
</script>
</html>

Check this out

➡️ Learn more about CSS Image Sprites and why use it.

Add Multiple background Image to an Element

You can add multiple background images to an element dynamically. However, the property that I am using in this example, is different from the above examples.

So, here I have used the background property of the "style" object.

The background property returns or sets eight different background properties in short-hand form.

<body>
  <div id='dv'> </div>
</body>

<script>
  let setbackground = () => {
    let el = document.getElementById('dv');
    
    // add multiple background images. 
        // The position of the 2nd background image is different.
        // Remaining properties are same.
    el.style.background= 
      "url('../../images/theme/javascript.png') no-repeat, url('../../images/theme/angularjs.png') no-repeat 100px 150px";
    
    // size of the images remain same.
    el.style.backgroundSize = "70px 70px";
  }

  setbackground();
</script>

Try it

Since there are two images, I had to position 2nd image to prevent overlapping.

Set Colour as Background image of an Element

You can apply colours or gradiant colours instead of images, as background to an element using the backgroundImage property.

In-addition, you can position the colour in the background.

<body>
  <div id='dv'> </div>
</body>

<script>
  let setbackground = () => {
    let el = document.getElementById('dv');

    // set colour as background.
    el.style.backgroundImage = 
      "radial-gradient(50% 50% at center center, rgba(10, 149, 231, .2) 0, rgba(10, 149, 231, 0) 100%)";
    
    // this is optional. but position the image (colour) and see what happens.
    el.style.backgroundPosition = "150px 150px";
  }

  setbackground();
</script>

Check this out

← PreviousNext →