Adapter un fond d'écran.
5 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Adapter un fond d'écran.
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.
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.
Dernière édition par MR-vercitty le Sam 11 Fév 2012 - 23:06, édité 1 fois
Re: Adapter un fond d'écran.
Bonjour,
Peut-être que ce tutoriel : Image de fond changeante selon la résolution du visiteur vous conviendra.
Cordialement.
Peut-être que ce tutoriel : Image de fond changeante selon la résolution du visiteur vous conviendra.
Cordialement.
Re: Adapter un fond d'écran.
Merci beaucoup,je vient de mette tout en place et sa fonctionne
Re: Adapter un fond d'écran.
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 ?
Elle ne s'affiche pas comme il se doit,quelle est la solution merci ?
Re: Adapter un fond d'écran.
Re,MR-vercitty a écrit: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 ?
N'ayant pas installé ce script, je laisse d'autres personnes s'y connaissant vous répondre.
Cordialement.
Re: Adapter un fond d'écran.
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 .
Re: Adapter un fond d'écran.
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 :
Re: Adapter un fond d'écran.
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é .
Re: Adapter un fond d'écran.
Bonjour, Où en-est votre problème ? Deux solutions :
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.
Re: Adapter un fond d'écran.
Voila ce que sa donne sur du 1152x864
sur du 1920x1080
sur du 1280x1024
sur du 1920x1080
sur du 1280x1024
Re: Adapter un fond d'écran.
Déjà le code n'est pas correct sur la fin.
Voir
Voir
- Code:
document.body.style.backgroundImage="url(\""+bg+"\")";
Re: Adapter un fond d'écran.
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 ?
Le code est situé dans "modules,gestion des codes javascript" c'est bien sa ?
Re: Adapter un fond d'écran.
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.
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+"\")";
Re: Adapter un fond d'écran.
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 .
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+"\")";
});
Re: Adapter un fond d'écran.
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é.
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.
- 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.
Re: Adapter un fond d'écran.
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
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
Re: Adapter un fond d'écran.
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 ?
Doit on supprimer l'ancien code ?
Et dans ton code ou met on l'URL de notre image de fond ?
Re: Adapter un fond d'écran.
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
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
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
Re: Adapter un fond d'écran.
Ok merci je vais testé
Re: Adapter un fond d'écran.
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 ?
Je veux que le cadre du forum ce déroule en même temps que le fond,comment fait ton ?
Re: Adapter un fond d'écran.
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.
Re: Adapter un fond d'écran.
Ok merci a vous c'est super sympa tout de même .
Re: Adapter un fond d'écran.
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 :
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 !
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 !
Re: Adapter un fond d'écran.
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 !
Re: Adapter un fond d'écran.
Cool :-)
Merci pour votre contribution aussi.
Merci pour votre contribution aussi.
Sujets similaires
» Adapter une image en fond à la résolution de l'écran.
» adapter image de fond de l'entete formactif
» Adapter un fond d'écran à tous les écrans
» Adapter le fond de page d'accueil à toutes les résolutions
» adapter mon image
» adapter image de fond de l'entete formactif
» Adapter un fond d'écran à tous les écrans
» Adapter le fond de page d'accueil à toutes les résolutions
» adapter mon image
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum