Discussione: Background responsive dans le header
Hello !
Sur ce site en construction : http://mara.katrynou.fr/, j'ai mis une image longue (1600x250) en background de head-top et j'ai positionné le slogan dans cette section, pour qu'il s'affiche par dessus.
L'image de fond est responsive, elle garde 100 % de sa largeur sur tous les écrans, et sa hauteur diminue donc sur les petits écrans pour garder sa proportion.
Toutefois, pour qu'elle conserve sa hauteur, j'ai dû spécifier une hauteur fixe de 250 px pour head-top, sinon, l'on ne voit que la partie haute de l'image.
L'affichage est correct sur grand écran, mais quand on diminue la taille de l'écran, la hauteur de head-top reste fixée à 250 px, même si on spécifie autre chose dans les media-queries et on se retrouve donc avec une grande zone blanche entre le head-top (avec son image) et le reste du site.
J'ai probablement fait une erreur en affectant la hauteur de 250 px à head-top. Comment puis-je corriger ?
Voilà mon css :
#head-top {margin:0;height:250px;background: url(img/bricquebec.jpg) no-repeat top fixed;background-size: 100% auto;background-color:transparent;}