Как заставить фоновое изображение появляться в HTML только один раз, используя JavaScript

Question

У меня есть две ячейки , я устанавливаю фоновое изображение для ячеек из массива изображений, используя JavaScript.

У меня есть изображения

image1= 150*150 по имени image1 только один раз

image2=150*150 по имени image2 только один раз

когда я устанавливаю изображения в качестве фонового изображения из ячеек , изображение повторяется в каждой ячейке,

т.е. Image1 появляются 3 раза в cell[1] аналогично.

`Как убрать это и заставить фоновое изображение появляться только один раз в FIT TO ENTER * ячейке .

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

Добавьте этот CSS и все готово ...

.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>

Answer 2

Необходимо установить для свойства 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;
  
  /* 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>