Bannière plein écran horizontale

[YoonA]

Bonjour !

J'ai besoin de votre aide, j'aimerais me faire un nouveau design et je voudrais que la bannière prenne toute la largeur du forum et savoir l'astuce qu'il faut faire pour que peu importe la résolution d'écran nous voyons tous la même chose. (Donc si je mets une image de 1800 px de largeur que je n'ai pas d'ascenseur horizontale si j'ai un écran en 1280px de largeur.)

J'ai été voir sur un forum le style que je veux, voici ce qu'on voit :



J'ai regardé avec DragonFly la manière dont ça a été fait, et j'ai vue qu'il y-avait une image "background" qui est le fond de nuage avec la ligne horizontale rose et un petit bout de fond noir :

https://nsa30.casimages.com/img/2013/01/11/130111110512444568.jpg

Le code : body { background: url("https://nsa30.casimages.com/img/2013/01/11/130111110512444568.jpg") 50% 0% repeat-x #141215; margin-top: 0px; }

Puis dessus y-a une image .png, le logo je suppose ^^ :

https://2img.net/r/ihimizer/img694/5432/logolko.png

Voilà j'espère que je me suis fait comprendre, merci d'avance de votre aide et explications !

[Scipion]

Bonsoir

Pour la bannière de fond, je vous invite à consulter et mettre en oeuvre les instructions de ce tutoriel FA :

Image de fond changeante selon la résolution du visiteur

Cordialement

[YoonA]

Bonsoir,

J'ai appliqué le tutoriel et je me retrouve avec un rectangle noir au milieu qui m'empêche de voir la bann de fond :/.

http://nimga.fr/f/UwrE6.png

Que dois-je faire pour m'en débarrasser ?

PS : J'ai essayé de mettre une image transparente de 300px de hauteur dans l'image du logo mais ça n'a rien changé.

[Scipion]

Théoriquement, si vous avez strictement respecté les instructions du tutoriel, notamment pour ce qui concerne les différentes dimensions, aucune anomalie ne devrait se produire.

Tant que ce problème n'est pas résolu, on ne peut pas continuer votre projet. Contrôlez votre travail et mettez ici les dimensions réelles des images introduites dans le code, merci.

Cordialement

[YoonA]

Peut-être est-ce du à autre chose ? Je pense avoir bien suivis le tuto.

Voici ce qui est écrit dans mon javascript :

Code:

$(function(){

 var bg= "http://nimga.fr/f/Mgm16.png";

 if(screen.width < 1025) bg="http://nimga.fr/f/QVPO8.png";
 else if(screen.width < 1281) bg="http://nimga.fr/f/HjFp8.png";
 else if(screen.width < 1601) bg="http://nimga.fr/f/4NPY4.png";

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

});

Et ce que j'ai ajouté dans mon CSS :

Code:

body{
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

[Scipion]

Et le problème est toujours là ?

Cordialement

[YoonA]

Oui j'ai toujours ce rectangle noir, et il se déplace quand je monte et descend avec l'ascenseur d'ailleurs, je pense qu'il est avec le "corps" du forum, le milieu :

[Scipion]

Bonjour

Pouvez-vous mettre à disposition l'URL de votre bannière ?

Cordialement

[YoonA]

http://nimga.fr/f/QVPO8.png
http://nimga.fr/f/HjFp8.png
http://nimga.fr/f/4NPY4.png

Les 3 tailles du javascript.

EDIT : Ah ! C'est bon j'ai retiré la couleur intérieure du cadre du forum et c'est parti. ^^

Merci beaucoup pour ton aide. ^^