Image de fond changeante, choix de résolution pas assez fourni !

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image de fond changeante, choix de résolution pas assez fourni !

Message par Bi-day Sam 8 Déc 2012 - 9:42

Bonjour,

J'ai un problème avec le code pour fixer une image dans le fond du forum, enfin ce n'est pas vraiment un problème mais j'ai besoin de votre aide !!

Au cas ou voici l'adresse de mon forum: http://www.les-cameleons.org/

J'ai mis en place ce script sur mon forum: https://forum.forumactif.com/t286701-image-de-fond-changeante-selon-la-resolution-du-visiteur#2531683

Il se trouve que sa fonctionne bien, l'image reste bien fixe sur le fond même quand on fait défiler.

Mon problème viens du fait que l'image est découpée a l'écran en fonction de la résolution, si on tombe sur une de ces 5 résolutions pas de problème:

▪ 800x600 px,
▪ 1024x768 px,
▪ 1280x960 px,
▪ 1600x1200px,
▪ taille plus grande que 1600px de large.

J'ai crée ces 5 images, le problème c'est qu'il y a beaucoup d'autres résolutions.

J'aurais voulu savoir lesquels sont les plus utilisés pour créer les images qui vont bien et surtout comment les insérer dans ce code:

Code:
$(function(){

var bg= "Adresse image (largeur plus grande que 1600px)";

if(screen.width < 801) bg="Adresse image (largeur 800px)";
else if(screen.width < 1025) bg="Adresse image (largeur 1024px)";
else if(screen.width < 1281) bg="Adresse image (largeur 1280px)";
else if(screen.width < 1601) bg="Adresse image (largeur 1600px)";

document.body.style.backgroundImage="url(\""+bg+"\")";

});

Merci a vous et aussi à Threax pour avoir crée ce tuto !!


Dernière édition par Bi-day le Lun 10 Déc 2012 - 9:10, édité 1 fois
avatar

Bi-day
*

Messages : 32
Inscrit(e) le : 04/12/2012

http://www.les-cameleons.org
Bi-day a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond changeante, choix de résolution pas assez fourni !

Message par Bi-day Lun 10 Déc 2012 - 8:27

Un petit Up !
avatar

Bi-day
*

Messages : 32
Inscrit(e) le : 04/12/2012

http://www.les-cameleons.org
Bi-day a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond changeante, choix de résolution pas assez fourni !

Message par Adam_sfp Lun 10 Déc 2012 - 9:00

Bonjour

Vous pouvez rajouter une ligne comme celle ci en changeant avec vos valeurs
Code:
else if(screen.width < 1281) bg="Adresse image (largeur 1280px)";

Vous pouvez essayer sinon ce script à voir si cela convient.
il faut remplacer le lien de l'image dans le code par le votre

Code:
(function(a){a.backstretch=function(k,i,l){function m(c){try{g={left:0,top:0},d=e.width(),b=d/j,b>=e.height()?(h=(b-e.height())/2,f.centeredY&&a.extend(g,{top:"-"+h+"px"})):(b=e.height(),d=b*j,h=(d-e.width())/2,f.centeredX&&a.extend(g,{left:"-"+h+"px"})),a("#backstretch, #backstretch img:last").width(d).height(b).filter("img").css(g)}catch(o){}typeof c=="function"&&c()}var n={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),f=c.data("settings")||n;c.data("settings");var e="onorientationchange"in window?a(document):a(window),j,d,b,h,g;i&&typeof i=="object"&&a.extend(f,i);a(document).ready(function(){if(k){var b;c.length==0?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(b){var d=a(this),e;d.css({width:"auto",height:"auto"}); e=this.width||a(b.target).width();b=this.height||a(b.target).height();j=e/b;m(function(){d.fadeIn(f.speed,function(){c.find(".deleteable").remove();typeof l=="function"&&l()})})}).appendTo(c);a("body #backstretch").length==0&&a("body").append(c);c.data("settings",f);b.attr("src",k);a(window).resize(m)}});return this}})(jQuery);$.backstretch("http://img714.imageshack.us/img714/1238/1024p.jpg");
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond changeante, choix de résolution pas assez fourni !

Message par Bi-day Lun 10 Déc 2012 - 9:10

Merci beaucoup, votre second code est impécable et simple a mettre en place !!
avatar

Bi-day
*

Messages : 32
Inscrit(e) le : 04/12/2012

http://www.les-cameleons.org
Bi-day a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum