I am currently working with two cells, where I have set background images for these cells using Javascript from an array of images.
The images available are:
image1= 150*150 referred to as image1 once
image2=150*150 referred to as image2 once
However, a problem arises when setting the images as background images for the cells. The same image gets repeated multiple times within each cell,
For example, Image1 appears three times in cell[1].
`I am seeking guidance on how to solve this issue and make sure that the background image appears only once, fitting perfectly into each entire cell.
var images = [
{label: '1',url: 'https://via.placeholder.com/150x150.jpg?text=image1'},
{label: '2',url: 'https://via.placeholder.com/150x150.jpg?text=image2'}
];
function bgsetting() {
boxtags = document.getElementsByClassName("cell");
boxtags[0].style.backgroundImage = 'url(' + images[0].url + ')';
boxtags[1].style.backgroundImage = 'url(' + images[1].url + ')';
}
bgsetting();.cell {
width: calc(33.3% - 4px);
border: 2px solid #333;
margin: -2px;
background-color: #99ffff;
height: 15vh;
display: inline-flex;
align-items: center;
background-size:contain;
}<div id="container">
<div class="cell" ></div>
<div class="cell" ></div>
</div>