1

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

2

Re: Background responsive dans le header

J'ai essayé la technique démontrée dans ce post : http://penanders.altervista.org/forum/v … .php?id=16
Mais autant ça marche bien dans une boîte libre, autant dans le header, où j'ai utilisé l'image en background, ça ne marche toujours pas.

L'idée est de mettre la hauteur du conteneur de l'image à zéro et son padding-top à un pourcentage, qui est le ratio entre la hauteur et la largeur de l'image.  Pour une image de 900px de large sur 300 px de haut, le ratio sera donc de 300/900=33.33%

Ce qui donnerait pour  l'exemple de taille d'image ci-dessus :

#conteneur {height:0;padding-top:33.33%;}

Mais sur le site de l'abbaye ça ne marche pas vraiment, alors que sur Revestou, les diaporamas sont bien responsive.