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?
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?
Bonjour,
tu fais une mauvaise interprétation de la spécification quant au calcul du positionnement.
3.6. Positioning Images: the ‘background-position’ property
Tu aurais peut être meilleur compte de passer par des images en position:absolute si tu dois en gérer plus de trois.
Diagram of the meaning of ‘background-position: 75% 50%.
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
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); });
Dernière modification par Invité ; 31/05/2017 à 15h32.
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); });
Dernière modification par Invité ; 31/05/2017 à 15h32.
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%' });
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
Partager