How to change background image of an element using JavaScript

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

Here is how you add a background image to an element (like DIV) 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

Along with background-image, I have assigned two more properties like background-repeat and background-size properties. The properties are also necessary when setting a background image to an element. Since, we do not want the image to repeat. And, the size of the images must be assigned.

There are other CSS background properties that you should know.

➡️ CSS background properties

Change background image dynamically

Now, let's see how we can set or assign background image to the above 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

The properties are case-sensitive.

To change the background of an 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.

Set Background Image Position

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

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 don't 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>

Try it

➡️ 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

Many web developers do not know this, that you can assign 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>

You must try it

← PreviousNext →