How to make background image appear only once in HTML using JavaScript

Question

I have two cells , I set background image for cells from an array of images using JavaScript.

I have images

image1= 150*150 named image1 only once

image2=150*150 named image2 only once

when I set images as background image of cells , Image get repeated in each cell,

ie Image1 appear 3 times in cell[1] likewise.

`How to remove this and make background image appear only once in an FIT TO THE 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> 

Answer 1

You have to set the background-repeat property to no-repeat . This will ensure that the background-image is not repeated. The image will only be shown once.

To fit the image into each cell you can use background-size: cover and background-position: center .

 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; /* style to set image properly*/ background-repeat:no-repeat; background-size: cover; background-position: center; } 

 <div id="container"> <div class="cell"></div> <div class="cell"></div> </div> 

Answer 2

Add this css and you're done...

.cell {
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
}

 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; background-repeat:no-repeat; background-size: cover; background-position: center; } 

 <div id="container"> <div class="cell" ></div> <div class="cell" ></div> </div>