Bannière plein écran horizontale

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Bannière plein écran horizontale

Message par YoonA Dim 31 Mar 2013 - 19:26

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 :

Bannière plein écran horizontale Yuynu

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 ! Razz


Dernière édition par YoonA le Lun 1 Avr 2013 - 14:09, édité 1 fois
YoonA

YoonA
*

Messages : 45
Inscrit(e) le : 29/06/2011

http://snsd-fansub.forumactif.fr/
YoonA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière plein écran horizontale

Message par Scipion Dim 31 Mar 2013 - 19:59

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
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière plein écran horizontale

Message par YoonA Dim 31 Mar 2013 - 21:19

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é.
YoonA

YoonA
*

Messages : 45
Inscrit(e) le : 29/06/2011

http://snsd-fansub.forumactif.fr/
YoonA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière plein écran horizontale

Message par Scipion Dim 31 Mar 2013 - 21:29

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
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière plein écran horizontale

Message par YoonA Dim 31 Mar 2013 - 23:11

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;
}
YoonA

YoonA
*

Messages : 45
Inscrit(e) le : 29/06/2011

http://snsd-fansub.forumactif.fr/
YoonA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière plein écran horizontale

Message par Scipion Dim 31 Mar 2013 - 23:15

Et le problème est toujours là ?

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière plein écran horizontale

Message par YoonA Lun 1 Avr 2013 - 13:21

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 :

Bannière plein écran horizontale Q6VeG
YoonA

YoonA
*

Messages : 45
Inscrit(e) le : 29/06/2011

http://snsd-fansub.forumactif.fr/
YoonA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière plein écran horizontale

Message par Scipion Lun 1 Avr 2013 - 13:28

Bonjour

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

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière plein écran horizontale

Message par YoonA Lun 1 Avr 2013 - 13:58

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. ^^ résolu
YoonA

YoonA
*

Messages : 45
Inscrit(e) le : 29/06/2011

http://snsd-fansub.forumactif.fr/
YoonA a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum