setting the background Size of div tag not working using Javascript

Question

I need to change the size of a background image during an animation but it doesn't work.

Here is a simple version of my code:

document.querySelector("#Box").backgroundSize='cover';

#Box {
  background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
  width: 220px;
  height: 220px;
    }

  <div id="Box"></div>

Answer 1

You should target the .style

document.querySelector("#Box").style.backgroundSize='cover';

#Box {
  background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
  width: 220px;
  height: 220px;
    }

  <div id="Box"></div>

Answer 2

You were missing the .style declaration in your query selector

document.querySelector("#Box").style.backgroundSize='cover';

#Box {
  background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
  width: 220px;
  height: 220px;
    }

<div id="Box"></div>

Answer 3

Just missing style from your js...

document.querySelector("#Box").style.backgroundSize='cover';

#Box {
  background-image: url(https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg);
  width: 220px;
  height: 220px;
    }

<div id="Box"></div>

Answer 4

The #Box element have no backgroundSize property. You should just refer to its style property and then to backgroundSize

document.querySelector("#Box").style.backgroundSize = 'cover'