title: How can I have an image in the background of 4 div elements with javascript?
body: <p>I want to have an image with height of 45px and width of (45*4)px as background of 4 div elements. All of these div elements are squares of 45px. My idea was to give each div-background the i-esime quarter part of the image. I'm trying to get the desired effect using background-position of the div elements as it shows on the code. Unfortunately the result shows the 4 parts of the image in a random order and not in sequential order.
  Here's the code:</p>
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;script&gt;
  
              function begin(){
  
                  var caselle = document.getElementsByTagName('div');
  
                  for (i=0; i&lt;4; i++){
                      caselle[i].style.display=&quot;inline-block&quot;;
                      caselle[i].style.height=&quot;45px&quot;;
                      caselle[i].style.width=&quot;45px&quot;;
                      caselle[i].textContent=&quot; &quot;;
                      caselle[i].style.backgroundImage=&quot;url(corazzata.jpg)&quot;;
                      caselle[i].style.backgroundSize=&quot;180px 45px&quot;;
                      caselle[i].style.backgroundPosition=(i*45)+&quot;px 45px&quot;;
                  }
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload=&quot;begin()&quot;&gt;
          &lt;div id=&quot;1&quot;&gt;&lt;/div&gt;
          &lt;div id=&quot;2&quot;&gt;&lt;/div&gt;
          &lt;div id=&quot;3&quot;&gt;&lt;/div&gt;
          &lt;div id=&quot;4&quot;&gt;&lt;/div&gt;
          &lt;div id=&quot;5&quot;&gt;&lt;/div&gt;
          &lt;img id=&quot;barca1&quot; src=&quot;corazzata.jpg&quot;&gt;
      &lt;/body&gt;
  &lt;/html&gt;```
  </code></pre>