Alignement d'une image à 50% de la hauteur suivant la résolution

Bonjour,

Etant débutant je suis confronté à un petit problème de CSS.

Je voudrais qu'une image, un simple rectangle bleu, soit alignée à 50% par rapport à la hauteur de la fenêtre du navigateur.

Le soucis est que la hauteur d'une page doit être de 1080px, j'ai mis un top:50% qui fonctionne sur les résolutions de 1080px mais naturellement pas pour les inférieures.

Comment pourrais-je faire pour que cette image soit alignée au milieu sur n'importe quelle résolution ?



D'avance un grand merci à celui ou celle qui m'aidera =)

	
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
   
<img src="../Sans-titre-3.jp" data-stellar-ratio="0.8" data-stellar-vertical-offset="-55"alt="">

</div>

.slide{
background-attachment: fixed;	
width:100%;
height:1000px;
position: relative;
}

#slide1{
background-color:#FFF;

}

#slide1 img:first-child{
position:absolute;
top: 50%;
background-color:#003399;
z-index:3;
width:100%;
height:500px;
}

Modifié par Jerome-k (02 Mar 2013 - 21:05)

Bonjour,

Tu dois ajouter cette ligne :

#slide1 img:first-child{
...

[b]margin-top:-250px; /*La moitié de la hauteur de l'image*/[/b]
}

Bonjour,

Merci de ta réponse mais si je fais comme dis, mon image n'est pas alignée à 50% verticalement si la personne à une résolution de 1900 x 1080 ..

Jerome-k a écrit :
Bonjour,

Merci de ta réponse mais si je fais comme dis, mon image n'est pas alignée à 50% verticalement si la personne à une résolution de 1900 x 1080 ..

Pourtant ça devrait fonctionner. Une page en ligne.?

Bonjour,

Merci d'essayer de m'aider.

J'ai mis le contenu plus haut en ligne sur ce site

Si on rétrécit la fenêtre, on voit bien que la bande bleue ne suit pas le milieu.
Modifié par Jerome-k (05 Mar 2013 - 20:36)

L'image s'aligne par rapport à la hauteur de < .slide> qui a une hauteur fixe de 1000 pixels !
Modifié par Sib (06 Mar 2013 - 12:31)

Comment faire pour ne pas qu'elle s'aligne avec la hauteur fixe de .slide?
Changer sa hauteur en 100% et mettre un min-height de 1080px..?

essaie

.slide {
    background-attachment: fixed;
    height: 100%;
    position: absolute;
    width: 100%;
}

#slide1 img:first-child {
    background-color: #003399;
    bottom: 0;
    height: 50%;
    position: absolute;
    width: 100%;
}

Modifié par Zebrou (07 Mar 2013 - 08:12)