Discussion :

[Toufik83]

https://jsfiddle.net/Toufi9/7uv2ywon/

la ligne 12 : next_bg_position_X =3* i * bg_X/2;
normalement la valeur la plus logique est : (i*bg_X), mais quand je la met, les images sont superposés l'une sur l'autre.
je me trompes peut être?

[NoSmoking]

Bonjour,
tu fais une mauvaise interprétation de la spécification quant au calcul du positionnement.
3.6. Positioning Images: the ‘background-position’ property

Diagram of the meaning of ‘background-position: 75% 50%.

Tu aurais peut être meilleur compte de passer par des images en position:absolute si tu dois en gérer plus de trois.

[Invité]

Bonjour,

vu la compléxité du positionnement en % (qui dépend du conteneur ET de l'image !),
=> on définira les largeurs d'images et les positions en pixels (c'est plus simple) : https://codepen.io/jreaux62/pen/ZKgJzx

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function set_container_backgrounds(id, imgs){
  var fond_css = [],
    bg_position = [],
    bg_size = [],
    bg_repeat = [];
  img_n = imgs.length; // nombre images (ici, 3)
  var img_W_pixel = ($(id).width() / img_n).toFixed(3); // (en pixels)
//  alert(img_W_pixel);
  for (i = 0; i < img_n; i++) {
    fond_css[i] = " url('" + imgs[i] + "')";
    bg_position[i] = " " + (i * img_W_pixel) + "px 0"; // (en pixels)
    bg_size[i] = " " + img_W_pixel + "px 100%"; // (en pourcent)
    bg_repeat[i] = " no-repeat";
  }
  // on concatène
  fond_css = fond_css.join(',');
  bg_position = bg_position.join(',');
  bg_size = bg_size.join(',');
  bg_repeat = bg_repeat.join(',');
 
  $(id).css({
    'background': fond_css,
    'background-position': bg_position,
    'background-size': bg_size,
    'background-repeat': bg_repeat
  });
};
 
$(window).on("load resize", function(){
    var imgs = [
      "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"
    ];
  set_container_backgrounds('#conteneur', imgs);
});

[Invité]

On peut aussi créer une fonction, si on veut l'appliquer à plusieurs conteneurs : https://codepen.io/jreaux62/pen/Lywjbw

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="conteneur"></div>
<div id="conteneur2"></div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#conteneur {
  width: 100%;
  height: 300px;
  border: 1px solid black;
  background-color:black
}
#conteneur2 {
  width: 100%;
  height: 500px;
  border: 1px solid red;
  background-color:black
}

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function set_container_backgrounds(id, imgs){
  var fond_css = [],
    bg_position = [],
    bg_size = [],
    bg_repeat = [];
  img_n = imgs.length; // nombre images
//  alert(img_n); (ici, 3)
  var img_W_pixel = ($(id).width() / img_n).toFixed(3); // (en pixels)
//  alert(img_W_pixel);
  for (i = 0; i < img_n; i++) {
    fond_css[i] = " url('" + imgs[i] + "')";
    bg_position[i] = " " + (i * img_W_pixel) + "px 0"; // (en pixels)
    bg_size[i] = " " + img_W_pixel + "px 100%"; // (en pourcent)
    bg_repeat[i] = " no-repeat";
  }
  // on concatène
  fond_css = fond_css.join(',');
  bg_position = bg_position.join(',');
  bg_size = bg_size.join(',');
  bg_repeat = bg_repeat.join(',');
 
  $(id).css({
    'background': fond_css,
    'background-position': bg_position,
    'background-size': bg_size,
    'background-repeat': bg_repeat
  });
};
 
$(window).on("load resize", function(){
    var imgs = [
      "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"
    ];
  set_container_backgrounds('#conteneur', imgs);
 
    var imgs = [
      "http://www.zupimages.net/up/17/21/pl48.jpg",
      "http://zupimages.net/up/17/21/r1v9.jpg",
      "http://zupimages.net/up/17/21/hsew.gif"
    ];
  set_container_backgrounds('#conteneur2', imgs);
});

[NoSmoking]

Si l'on souhaite le faire via javascript et pour des images de même dimensions d'affichage et de nombre variable, on peut faire plus simple en pourcentage, cela évite le redraw lors du resize.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var 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'
];
var i;
var nombreImages = img.length;
var urlImages = [];
var positionImages = [];
var largeurImages = (100 / nombreImages);
var ecartImages = (100 / (nombreImages - 1) || 1);
 
for (i = 0; i < nombreImages; i += 1) {
  urlImages.push('url(' + img[i] + ')');
  positionImages.push(ecartImages * i + '%');
}
 
$('.conteneur').css({
  'background-image': urlImages.join(','),
  'background-repeat': 'no-repeat',
  'background-position': positionImages.join(','),
  'background-size': largeurImages + '% 100%'
});