title: Change background image with querySelector every 10 sec not working
body: <p>I try to change the background image in the div every 10 seconds to a random image (img/1-10.jpg).</p>
  
  <p>The background changes only once and not every 10 seconds as it should change
  ... I am getting ALERT every 10 seconds (so setInterval does work).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function update() {    
    window.setInterval(function() {
      alert('ok');
      document.querySelector("#ri-grid div:nth-child(1)")
        .style
        .backgroundImage = "url(img/&lt;?php echo rand(1,10);?&gt;.jpg)";
    }, 10000); 
  }
  
  update();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid--layout-1 .grid__item:nth-child(1) {
    background-image: url(img/1.jpg);  
    transition: background 5s linear; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid grid--layout-1 grid--current" id="ri-grid"&gt;
    &lt;div class="grid__item 0"&gt;&lt;/div&gt;
    &lt;div class="grid__item 1"&gt;&lt;/div&gt;
    &lt;div class="grid__item 2"&gt;&lt;/div&gt;
    &lt;div class="grid__item 3"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>