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:
<html>
<head>
<meta charset="utf-8">
<script>
function begin(){
var caselle = document.getElementsByTagName('div');
for (i=0; i<4; i++){
caselle[i].style.display="inline-block";
caselle[i].style.height="45px";
caselle[i].style.width="45px";
caselle[i].textContent=" ";
caselle[i].style.backgroundImage="url(corazzata.jpg)";
caselle[i].style.backgroundSize="180px 45px";
caselle[i].style.backgroundPosition=(i*45)+"px 45px";
}
}
</script>
</head>
<body onload="begin()">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<img id="barca1" src="corazzata.jpg">
</body>
</html>```
Have you tried setting the image as background for a parent div and having those divs inside with no background?
Here is an example https://jsfiddle.net/mr_bobz/6zyw3j2d/
<html>
<head>
<meta charset="utf-8">
</head>
<body >
<div style="background-color: yellow; background-image: url('https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1140180560?k=20&m=1140180560&s=612x612&w=0&h=X_400OQDFQGqccORnKt2PHYvTZ3dBLeEnCH_hRiUQrY='); height: 250px; background-repeat: no-repeat;">
<div style='height: 50px; color: white' id="1">DIV 1</div>
<div style='height: 50px; color: white' id="2">DIV 2</div>
<div style='height: 50px; color: white' id="3">DIV 3</div>
<div style='height: 50px; color: white' id="4">DIV 4</div>
<div style='height: 50px; color: white' id="5">DIV 5</div>
</div>
</body>
</html>