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

user_9503255 0
Viewed 4666

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,

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

css html javascript
2 Answers

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>

user_74613810

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>

user_95576070
Related