Discussion :

[gnova]

Bonjour à tous,

je me permet de venir vers vous car j'ai un soucis avec mon portfolio que je suis en train de développer ( http://www.yoannbazoge.com/jquery-on/ ). J'ai trouver une source sur le net pour avoir un base sous forme de slide, le soucis c'est que sur cette base je n'arrive pas à mettre comme je souhaite le fond. J'ai quelques notions de CSS mais là je bloque. En gros je souhaiterai que mon image de fond, se centre suivant la hauteur de l'écran des personnes. Hors là l'image se cale juste en haut de la fenêtre du navigateur. Si vous modifiez dans firebug " top left " par " center left " vous verrez que l'image met son centre en haut du navigateur. J'aurai donc voulut savoir si vous aviez une idée. Sachant que je souhaiterai que l'image de fond ne soit pas fixe mais slide avec le contenu.

Merci beaucoup d'avance.

Yoann

[troumad]

As-tu essayé la propriété background-position?

'background-position'
Valeur : [ [<pourcentage > | <longueur> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Initiale : 0% 0%
S'applique à : ceux des éléments de type bloc et ceux remplacés
Héritée : non
Pourcentage : se rapporte à la taille de la boîte elle-même
Médias : visuel

Elle pourrait peut-être bien t'aider. Non ?

[gnova]

merci à toi troumad.

J'ai essayé en rajoutant un background-position mais le problème, c'est que je me retrouve avec ces valeurs :

background-position: 0% 15%;

N'ayant qu'un seul écran sous la main, je me demande si le 15% (pour centre en hauteur mon image de fond) ne risque pas de créer des conflits et de ne pas être centrée sur certaines résolution ?

Merci d'avance.

[devyan]

Bonjour,

tu as essayé d'utiliser les constantes ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-position: left center;

[gnova]

Oui j'ai essayé, mais en fait l'image met son centre, en haut de ma fenêtre navigateur (essaye avec firebug si tu l'as, tu verras)

Merci quand même !

[devyan]

Si tu mets une bordure à BODY, tu verras qu'en fait le centrage est fait correctement mais que BODY a une hauteur nulle.

si tu ajoutes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

html, body {height: 100%;}

Ça devrait aller mieux.

devyan