Centrer une image background verticalement.

Bonsoir!

J'aimerais savoir si il y aurait moyen de centrer une image bckgrd verticalement.

http://nicedot.be/indexB.htm

Le logo et le menu sont centrés (height: 600px; top: 50%; margin-top:-300px;)
et j'aimerais que l'image de fond soit de même, quelque soit la résolution de l'écran.

L'image fait 1280x900

Si je mets l'image dans une div, j'aurais des scrollbars sur les petits écrans. Chose que je veux éviter.


En gros, on ne devrait voir le bckgrd en partie sur les petits écrans, et entier sur les grands.
http://i.imagehost.org/0088/indexH600.jpg
http://i.imagehost.org/0220/indexH900.jpg

J'espère que les images vous seront plus clairs
Modifié par Paintme (21 Jan 2010 - 20:59)

Bonsoir,

background-position: center;

Le problème ce n'est pas la position du background mais plutôt que l'image est relativement grosse. Du moment que tu redimensionnes la fenêtre de ton navigateur plus petit que la hauteur de l'image, c'est là que ce n'est plus centré.

J'ai fait un petit test et je crois que ça répond mieux à ta question.

Ajoute un div autour de body_container

<div id="bg">
	<div id="body_container">
    	contenu 
    </div>
</div>

J'ai mis ton image de background dans ce nouveau div plutôt que sur le body. Tu n'auras qu'à jouer avec le pourcentage pour la position verticale pour l'ajuster à la hauteur que tu veux.

* { margin:0; padding:0; }
html, body, div#bg {  height:100%; }
div#bg { 
    width:100%; 
    background:url(http://nicedot.be/images/images_index/bckgrd.jpg) no-repeat 0px 50%;  
}

Modifié par Sorano (21 Jan 2010 - 21:47)

Merci c'est exactement ce que je voulais!!