Multiples arrières plan (background)

Version imprimable

25/05/2017, 17h27
Toufik83

Multiples arrières plan (background)

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?
31/05/2017, 11h08
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

https://drafts.csswg.org/css-backgro...ges/bg-pos.png

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.

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:

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);
});

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

Code:

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

Code:

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:

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);
});

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:

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%'
});