Adapter un fond d'écran.

[MR-vercitty]

Bonjour tout le monde,j'ai déjà trouvé des réponses dans le passé pour certaine chose,mais pour celle-ci je ne parvient pas a trouvé l'astuce .

Je m'explique,je vient de créer un fond d'écran que j'ai installé,mais certain membre utilisant la résolution d'écran "1920x1080" n'a pas le même rendu que moi qui suit en "1360x766".

J'ai règle ma structure du forum sur 100 et rien n'a changé.

J'espère que quelqu'un pourra m'aidé a trouvé la solution d'adapter mon fond a toute les résolutions merci a vous.

[Chacha]

Bonjour,

Peut-être que ce tutoriel : Image de fond changeante selon la résolution du visiteur vous conviendra.


Cordialement.

[MR-vercitty]

Merci beaucoup,je vient de mette tout en place et sa fonctionne

[MR-vercitty]

J'ai crier gloire un peut trop vite,j'ai un souci au niveau de la plus grande dimension 1920x1080 .

Elle ne s'affiche pas comme il se doit,quelle est la solution merci ?

[Chacha]

J'ai crier gloire un peut trop vite,j'ai un souci au niveau de la plus grande dimension 1920x1080 .

Elle ne s'affiche pas comme il se doit,quelle est la solution merci ?

Re,

N'ayant pas installé ce script, je laisse d'autres personnes s'y connaissant vous répondre.


Cordialement.

[MR-vercitty]

Merci a vous,j'espère avoir une réponse assez rapidement car c'est tout de même gênant pour ceux qui utilise cette résolution .

[MR-vercitty]

Mon problème est que l'image de fond du forum ne s'adapte pas a toute les résolutions des uns des autres,j'ai suivi votre tuto concernant ce problème,mais il s'avère que le problème persiste et aucune amélioration en vue .

Voici le code que j'ai rentrer :

Code:

$(function(){ var bg= "http://s4.noelshack.com/old/up/1920x1080-c6294b9b36.jpg"; if(screen.width < 801) bg="http://s4.noelshack.com/old/up/800x4500-c320a0c452.jpg";else if(screen.width < 1025) bg="http://s4.noelshack.com/old/up/1024x4500-39abffa563.jpg";else if(screen.width < 1281) bg="http://s4.noelshack.com/old/up/1280x4500-9ef4b7f72.jpg";else if(sreen.width < 1351) bg="http://s4.noelshack.com/old/up/1350x4500-7cdeb21151.jpg";else if(screen.width < 1601) bg="http://s4.noelshack.com/old/up/1600x4500-2383994364.jpg";else if(screen.width < 1921) bg="http://s4.noelshack.com/old/up/1920x4500-f5bc14dd33.jpg";document.body.style.backgroundImage="url(""+bg+"")"; });

Je me demandé quand on fait cette manipulation faut il insérer une image de fond dans "Affichage" "gestion des image" ?

Faut il mettre une image pour la banniére,car celle actuelle est une transaparente en "1000x300" elle sert a ce que l'hauteur de mon image de fond soit adapter au forum ?

Je ne sais pas vraiment comment resoudre le probléme,j'attend vraiment une solution de votre part un grand merci .

Ah oui derniére chose comment fait on pour que l'image de fond puisse se dérouler en même temps que le cadre du forum sens avoir une double image en bas du forum,car la aussi j'ai essayé d'allongé l'image,mais quelque soit la hauteur rien ne change.

Voici l'image de fond que je voudrais pour qu'elle s'adapte a tout le monde :

[MR-vercitty]

up

[MR-vercitty]

Je post pour confirmé que le problème n'est toujours pas résolu,j'attends toujours une réponse comme vous pouvez le constaté .

[Automne]

Bonjour, Où en-est votre problème ? Deux solutions : Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message, Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté, A bientôt sur ForumActif

Pourriez vous faire une capture d'écran du problème rencontré. Avec un 43 pouces et un 16/9 je ne constate rien d’anormal sur votre fond d'écran.

[MR-vercitty]

Voila ce que sa donne sur du 1152x864



sur du 1920x1080



sur du 1280x1024

[Automne]

Déjà le code n'est pas correct sur la fin.

Voir

Code:

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

[MR-vercitty]

Je vient de vérifier,et je constate que le code que vous me donnez est exactement le même .

Le code est situé dans "modules,gestion des codes javascript" c'est bien sa ?

[Automne]

Oui, dans module gestion des javascripts. Penser a les activer en cochant oui. .

Par contre se que je vous disais plus haut c'est que la fin de votre code, ne correspond pas a celui du tuto.

Code:

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

[MR-vercitty]

Le code ci dessus est exactement le même de celui qui est introduit,je ne comprend pas trop ou est l'erreur du code ?

voici mon code en entier .

Code:

$(function(){

var bg= "http://s4.noelshack.com/old/up/1920x1080-c6294b9b36.jpg";

if(screen.width < 801) bg="http://s4.noelshack.com/old/up/800x600-8cb4d78186.jpg";
else if(screen.width < 1025) bg="http://s4.noelshack.com/old/up/1024x4500-39abffa563.jpg";
else if(screen.width < 1281) bg="http://s4.noelshack.com/old/up/1280x4500-9ef4b7f72.jpg";
else if(sreen.width < 1351) bg="http://s4.noelshack.com/old/up/1350x4500-7cdeb21151.jpg";
else if(screen.width < 1601) bg="http://s4.noelshack.com/old/up/1600x4500-2383994364.jpg";
else if(screen.width < 1921) bg="http://s4.noelshack.com/old/up/1920x4500-f5bc14dd33.jpg";
document.body.style.backgroundImage="url(\""+bg+"\")";
});

[MR-vercitty]

[MR-vercitty]

[Alamake]

Bonjour, j'ai le même problème que MR-vercitty, l'image ne s'adapte pas. L'ai activé les Javascripts, coché "dans toutes les page", supprimé mon image de fond dans gestion des images, mais rien n'y fait mon image est toujours trop large pour mon écran. Voici le code que j'ai utilisé.

Code:

$(function(){

var bg= "http://i43.servimg.com/u/f43/17/03/14/84/cartel11.jpg";

if(screen.width < 801) bg="http://i43.servimg.com/u/f43/17/03/14/84/cartel12.jpg";
else if(screen.width < 1025) bg="http://i43.servimg.com/u/f43/17/03/14/84/cartel13.jpg";
else if(screen.width < 1281) bg="http://i43.servimg.com/u/f43/17/03/14/84/cartel14.jpg";
else if(screen.width < 1601) bg="http://i43.servimg.com/u/f43/17/03/14/84/cartel15.jpg";

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

});

Ce que je ne comprend pas c'est qu'Automne dit à MR-vercitty que la fin de son code n'est pas correct, comme lui je ne vois malheureusement pas l'erreur... :S

Merci par avance de tenter de m'aider...

---

Edit : Il semblerait que sur des navigateurs exotique tel-que Opéra et Safari l'image s'adapte, mais sur Firefox et Explorer non.

[Etoille]

Bonjour à vous.

Essayez avec ce code, il n'y a pas a héberger plusieurs fois l'image, je l'utilise sur un de mes forums

https://forum.forumactif.com/t324811-code-html-multi-resolution#2810535

[MR-vercitty]

Etoile le code que tu nous fournis on le met dans javascript ?

Doit on supprimer l'ancien code ?

Et dans ton code ou met on l'URL de notre image de fond ?

[Etoille]

Oui vous devez supprimer l'ancien code.

Celui-ci se met dans PA-> modules-> gestion des codes javascripts (comme celui que vus aviez avant).

L'url de l'image se met tout à la fin, j'ai marqué l'emplacement

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("ICI L'ADRESSE DE VOTRE IMAGE");

Les personnes qui n'auront pas activé javascript sur le navigateur vont voir l'image/la couleur de fond que vous aurez définie dans le ccs, dans le cas contraire, c'est le script qui prend le dessus

[MR-vercitty]

Ok merci je vais testé

[MR-vercitty]

Ok c'est bon sa fonctionne pour le fond,par contre et oui il a toujours quelques chose

Je veux que le cadre du forum ce déroule en même temps que le fond,comment fait ton ?

[Etoille]

Vous voulez que le fond défile en même temps que le scroll? Si c'est le cas, ce code ne le permet pas, le fond sera fixe.

[MR-vercitty]

Ok merci a vous c'est super sympa tout de même .

[Alamake]

MR-Vercitty ! Je sais comment faire pour que le fond bouge !!^^
En cherchant comment ne pas centrer l'image dans la hauteur car sur mon forum le haut est coupé j'ai trouvé la partie du code qui fixé le fond ! (J'suis trop fière car je n'y connais rien en code ! J'ai testé chez moi et ça fonctionne ! Donc prend ce code :

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,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("URL DE L'IMAGE");

Bon je retourne à mes réflexion pour résudre mon petit problème car sinon ça fonctionne très très bien !! Merci beaucoup Etoile !

[Alamake]

J'ai réussi à mettre le haut de mon image !! Pour ceux que ça intéresse :

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,topY:!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("URL DE L'IMAGE");

Et donc MR-Vercitty, si tu veux mélanger les deux codes car je pense que c'est ce qu'il te faux, voici :

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,topY:!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,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("URL DE L'IMAGE");

Encore merci Etoile, car sans le code de base je ne serais jamais arrivé à ça !

[Etoille]

Cool :-)

Merci pour votre contribution aussi.

[MR-vercitty]