Image de fond (forum) en fonction de la résolution (Invision)
2 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
Image de fond (forum) en fonction de la résolution (Invision)
Salut à tous, en ce moment nous sommes en train de préparer une nouvelle interface graphique pour notre site communautaire et j'ai un soucis avec l'image de fond...
Alors j'ai bien fait des recherche, mais je ne n'ai pas trouver mon bonheur... nous utilisons pour le nouveau graphisme Invision
Dans l'ancienne version l'image de fond était plutôt unis et de grande taille... pas de soucis pour les différentes résolutions
Par contre dans la nouvelle version nous aimerions avoir des sorte de bandeaux à droite à et à gauche du fofo.
L'image que nous testons actuellement est la suivante :
Le forum en question (utilisé pour les tests) : http://fffida-test.bb-fr.com/
Donc comme dit j'ai bien lu des truc en java pour php2 ou 3 mais pour invision... je suppose qu'il est possible de spécifié une image différente en fonction de la résolution... mais je ne connais que trop peu le CSS...
Un peu d'aide ne serais pas de refus.
D'avance Merci
Alors j'ai bien fait des recherche, mais je ne n'ai pas trouver mon bonheur... nous utilisons pour le nouveau graphisme Invision
Dans l'ancienne version l'image de fond était plutôt unis et de grande taille... pas de soucis pour les différentes résolutions
Par contre dans la nouvelle version nous aimerions avoir des sorte de bandeaux à droite à et à gauche du fofo.
L'image que nous testons actuellement est la suivante :
- Spoiler:
Le forum en question (utilisé pour les tests) : http://fffida-test.bb-fr.com/
Donc comme dit j'ai bien lu des truc en java pour php2 ou 3 mais pour invision... je suppose qu'il est possible de spécifié une image différente en fonction de la résolution... mais je ne connais que trop peu le CSS...
Un peu d'aide ne serais pas de refus.
D'avance Merci
Dernière édition par Slide21 le Ven 16 Sep 2011 - 11:20, édité 1 fois
Re: Image de fond (forum) en fonction de la résolution (Invision)
Bonjour
Vous pouvez essayer ceci (l'image s'adapte en fonction de l'écran )via un script SOURCE
Allez dans modules -->Gestion des codes Javascript
- créer un nouveau javascript.
-mettez un titre par exemple: Backstretch
-cochez sur toutes les pages et collez le code ci dessous et validez.
Si vous voulez essayer une autre image changez l'url de celle ci dans le code par la nouvelle Url.
*Il y a une variante du code qui permet d'avoir le fond qui change entre plusieurs images..
Cordialement.
Vous pouvez essayer ceci (l'image s'adapte en fonction de l'écran )via un script SOURCE
Allez dans modules -->Gestion des codes Javascript
- créer un nouveau javascript.
-mettez un titre par exemple: Backstretch
-cochez sur toutes les pages et collez le code ci dessous et validez.
- 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://i45.servimg.com/u/f45/16/65/10/90/fond510.png");
Si vous voulez essayer une autre image changez l'url de celle ci dans le code par la nouvelle Url.
*Il y a une variante du code qui permet d'avoir le fond qui change entre plusieurs images..
Cordialement.
Re: Image de fond (forum) en fonction de la résolution (Invision)
C'est déjà un gros gros plus pour moi... merci...
Il faut que maintenant je trouve le bon rapport...
Sinon cela doit existé également en faisant changer l'image directement... ?
genre une image pour tel résolution, une pour une autre... quitte à en faire 10 ?
Mais merci beaucoup
Il faut que maintenant je trouve le bon rapport...
Sinon cela doit existé également en faisant changer l'image directement... ?
genre une image pour tel résolution, une pour une autre... quitte à en faire 10 ?
Mais merci beaucoup
Re: Image de fond (forum) en fonction de la résolution (Invision)
En fait ça pourrais marcher si le script redimensionnait l'image que par rapport à la largeur, qu'il ne prenne pas en compte la hauteur de la résolution....
Je ne sais pas si je me fait comprendre ?
Mais en gros je pense qu'il ajuste l'image en hauteur et largeur, rapport à la résolution de l'image...
Il faudrait ne pas touché à la hauteur et faire que la largeur... mais je ne sais pas quoi retiré dans le script
Je ne sais pas si je me fait comprendre ?
Mais en gros je pense qu'il ajuste l'image en hauteur et largeur, rapport à la résolution de l'image...
Il faudrait ne pas touché à la hauteur et faire que la largeur... mais je ne sais pas quoi retiré dans le script
Re: Image de fond (forum) en fonction de la résolution (Invision)
Bonsoir
*Pensez à la fonction afin d'éviter les doubles posts..
Sinon si vous voulez faire plusieurs images de tailles différentes vous pouvez essayer ce TUTO
Cordialement.
*Pensez à la fonction afin d'éviter les doubles posts..
Sinon si vous voulez faire plusieurs images de tailles différentes vous pouvez essayer ce TUTO
Cordialement.
Re: Image de fond (forum) en fonction de la résolution (Invision)
Oui désolé pour le Edit, ok c'est exactement ce que je cherchais... je test demain...
Re: Image de fond (forum) en fonction de la résolution (Invision)
J'ai tester ce jour avec cela :
Mais j'obtiens un erreur type document.body is null...
avec IE le script me dit une erreur ligne 1 objet incinnu
???
- Code:
var bg= "http://img11.hostingpics.net/pics/2743261280.png";
if(screen.width < 801) bg="http://img11.hostingpics.net/pics/2743261280.png";
else if(screen.width < 1025) bg="http://img11.hostingpics.net/pics/9774251024.png";
else if(screen.width < 1281) bg="http://img11.hostingpics.net/pics/2743261280.png";
else if(screen.width < 1601) bg="http://img11.hostingpics.net/pics/2743261280.png";
else if(screen.width < 1921) bg="http://img11.hostingpics.net/pics/2743261280.png";
document.body.style.backgroundImage="url("+bg+")";
Mais j'obtiens un erreur type document.body is null...
avec IE le script me dit une erreur ligne 1 objet incinnu
???
Re: Image de fond (forum) en fonction de la résolution (Invision)
Bonjour
Les images que vous avez mises n'ont pas la bonne taille ou la même taille...
la première doit être la plus grande ce qui n'est pas le cas..
Essayez déjà de respecter le tuto sans le changer...
Cordialement.
Les images que vous avez mises n'ont pas la bonne taille ou la même taille...
la première doit être la plus grande ce qui n'est pas le cas..
Essayez déjà de respecter le tuto sans le changer...
Cordialement.
Re: Image de fond (forum) en fonction de la résolution (Invision)
Adam_sfp a écrit:Bonjour
Les images que vous avez mises n'ont pas la bonne taille ou la même taille...
la première doit être la plus grande ce qui n'est pas le cas..
Essayez déjà de respecter le tuto sans le changer...
Cordialement.
Alors je ne suis pas un spécialiste javascript, mais j'ai la vague impression que le fait de mettre n'importe quelle image ne changera rien...
L'image la plus grande à mettre en premier est simplement faite dans le cas ou le Elseif ne trouve aucune réponse...(résolution plus grande de 1600)
dans ce cas là la variable à déjà une valeur... si cela n'avais pas été le cas alors il y aurait eu un message d'erreur car la variable aurait été vide...
Voilà ce que j'en pense... et puis je ne vois pas comment ce script java peut vérifié si la première image que je lui donne est plus grande que la deuxième...
D'après ce que j'en comprend moi, c'est que le Body n'est pas connu au moment de l'éxécution du script... (page chargé après les script ?)
Re: Image de fond (forum) en fonction de la résolution (Invision)
Bonjour
Je vous rassure je ne suis pas un spécialiste en javascript non plus..
C'est pour cette raison qu'en général quand je suis un tuto je le fais d'abord tel quel avant d'y apporter des modifications..
Pour revenir au tuto il manquait quelques éléments à celui ci ..
C'est rectifié merci Etana.
Cordialement.
Je vous rassure je ne suis pas un spécialiste en javascript non plus..
C'est pour cette raison qu'en général quand je suis un tuto je le fais d'abord tel quel avant d'y apporter des modifications..
Pour revenir au tuto il manquait quelques éléments à celui ci ..
C'est rectifié merci Etana.
- Code:
$(function(){
var bg= "http://img11.hostingpics.net/pics/2743261280.png";
if(screen.width < 801) bg="http://img11.hostingpics.net/pics/2743261280.png";
else if(screen.width < 1025) bg="http://img11.hostingpics.net/pics/9774251024.png";
else if(screen.width < 1281) bg="http://img11.hostingpics.net/pics/2743261280.png";
else if(screen.width < 1601) bg="http://img11.hostingpics.net/pics/2743261280.png";
else if(screen.width < 1921) bg="http://img11.hostingpics.net/pics/2743261280.png";
document.body.style.backgroundImage="url("+bg+")";
});
Cordialement.
Re: Image de fond (forum) en fonction de la résolution (Invision)
Adam_sfp a écrit:Bonjour
Je vous rassure je ne suis pas un spécialiste en javascript non plus..
C'est pour cette raison qu'en général quand je suis un tuto je le fais d'abord tel quel avant d'y apporter des modifications..
Pour revenir au tuto il manquait quelques éléments à celui ci ..
C'est rectifié merci Etana.
Cordialement.
Oui moi aussi habituellement je suis à la lettre les tuto... mais bon je connais un peu le code en général (très peu le javascript) et je me suis donc permis un peu de liberté sur ce point que je soupçonnais fortement d'être négligeable...
Merci beaucoup pour la correction et la rapidité de réponse.... je test demain et je vous dit
Re: Image de fond (forum) en fonction de la résolution (Invision)
C'est tout bon, encore un grand merci...
Par rapport à mes tests.
Le premier script donné est tout simplement génial mais redimensionne l'image sans tenir compte de son format d'origine et donc la déforme en passant de 4:3 à 16:10 ou 16:9 mais à l'avantage de n'avoir qu'une image et en plus c'est la taille de la fenêtre qui est prise en compte... donc même en réduisant la fenêtre ça fonctionne encore... génial.
Le second fonctionne très bien mais s’appuie justement sur la résolution et donc en réduisant la fenêtre le fond n'est plus bien placé...
En tout cas encore merci.
Par rapport à mes tests.
Le premier script donné est tout simplement génial mais redimensionne l'image sans tenir compte de son format d'origine et donc la déforme en passant de 4:3 à 16:10 ou 16:9 mais à l'avantage de n'avoir qu'une image et en plus c'est la taille de la fenêtre qui est prise en compte... donc même en réduisant la fenêtre ça fonctionne encore... génial.
Le second fonctionne très bien mais s’appuie justement sur la résolution et donc en réduisant la fenêtre le fond n'est plus bien placé...
En tout cas encore merci.
Sujets similaires
» Image de fond et résolution
» Image de fond qui s'adapte à la résolution du visiteur
» Adapter une image en fond à la résolution de l'écran.
» Texte illisible sur image de fond / résolution
» Image de fond s'adaptant à la résolution des visiteurs
» Image de fond qui s'adapte à la résolution du visiteur
» Adapter une image en fond à la résolution de l'écran.
» Texte illisible sur image de fond / résolution
» Image de fond s'adaptant à la résolution des visiteurs
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