Quiero tener una imagen con una altura de 45 px y un ancho de (45 * 4) px como fondo de 4 elementos div. Todos estos elementos div son cuadrados de 45px. Mi idea era darle a cada div-background la cuarta parte i-esime de la imagen. Estoy tratando de obtener el efecto deseado usando la posición de fondo de los elementos div como se muestra en el código. Desafortunadamente, el resultado muestra las 4 partes de la imagen en orden aleatorio y no en orden secuencial. Aquí está el código:
<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>```¿Ha intentado configurar la imagen como fondo para un div principal y tener esos div dentro sin fondo?
Aquí hay un ejemplo 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>