Image de fond (forum) en fonction de la résolution (Invision)

[Slide21]

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 :

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

[Adam_sfp]

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.

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.

[Slide21]

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

[Slide21]

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

[Adam_sfp]

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.

[Slide21]

Oui désolé pour le Edit, ok c'est exactement ce que je cherchais... je test demain...

[Slide21]

J'ai tester ce jour avec cela :

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


???

[Adam_sfp]

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.

[Slide21]

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 ?)

[Adam_sfp]

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.

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.

[Slide21]

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

[Slide21]

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.