Backgroung-image dans un header en responsive

Bonjour,

Tout est dans le titre ,
je mets une image dans le header en "backgroung-image", mais celle-ci ne se rétréci pas malgré le

background-size: cover;

De même, j'ai été obligé de mettre un "height" dans le header sinon, l'image apparaissait au fur à mesure que le header se remplissait...ça ne fonctionne pas du tout comme sur un body.

j'ai un lien codepen : https://codepen.io/ricem/pen/rNgEdww?editors=1100 si vous voulez voir.

Merci.
Modifié par ricem (30 Jun 2024 - 12:03)

Bonjour. C'est normal , `cover` n'a pas pour but de "rétrécir" mais de s'adapter à l'espace disponible. Donc si l'on cherche à jouer avec la largeur il ne se passe rien si la hauteur de l'élément ne bouge pas.

Olivier C a écrit :
Bonjour. C'est normal , `cover` n'a pas pour but de "rétrécir" mais de s'adapter à l'espace disponible. Donc si l'on cherche à jouer avec la largeur il ne se passe rien si la hauteur de l'élément ne bouge pas.

Juste pour info, J'ai essayé avec un

background-size: contain;

il se rétréci bien, mais laisse un blanc entre le "header" et le "main", peut on régler ce problème ?