Multiples background-image

by Benahmed Taoufiq

HTML

<div id="conteneur">

</div>

CSS

#conteneur {
  width: 100%;
  height: 200px;
  border: 1px solid black;
  background-color:black
}

JavaScript

/*
https://www.developpez.net/forums/d1702178/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/bibliotheques-frameworks/jquery/multiples-arrieres-plan-background/*/
var fond_css = "",
  bg_repeat = "",
  bg_position = "",
  bg_size = "",
  bg_X, next_bg_position_X,
  img = [ "http://zupimages.net/up/17/21/r1v9.jpg","http://zupimages.net/up/17/21/hsew.gif","http://www.zupimages.net/up/17/21/pl48.jpg"];
for (i = 0; i < img.length; i++) {
  bg_X = (100 / img.length).toFixed(2);
  fond_css += "url('" + img[i] + "'),";
  bg_size += " " + bg_X + "% 100%,";
  next_bg_position_X =3* i * bg_X/2;/*i*bg_X*/
  bg_position += " " + next_bg_position_X + "% 100%,";
  bg_repeat += " no-repeat,";
  if (i == img.length-1) {
    fond_css = fond_css.substr(0, fond_css.lastIndexOf(","));
    bg_size = bg_size.substr(0, bg_size.lastIndexOf(","));
    bg_position = bg_position.substr(0, bg_position.lastIndexOf(","));
    bg_repeat = bg_repeat.substr(0, bg_repeat.lastIndexOf(","));
  }

}
$("#conteneur").css({
  "background": fond_css,
  "background-repeat": bg_repeat,
  "background-position": bg_position,
  "background-size": bg_size
});