28163 sujets

CSS et mise en forme, CSS3

Bonjour,

Tout est dans le titre Smiley biggrin ,
je mets une image dans le header en "backgroung-image", mais celle-ci ne se rétréci pas malgré le
background-size: cover;
Smiley ohwell

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 ?
Forcément.
Soit on fait en fonction de l'image (contain), soit en fonction de l'élément à couvrir (cover).
Entre les deux il faut choisir.

Une solution de contournement pourrait être d'opter pour une image orientée portrait, suffisamment grande en hauteur pour qu'elle couvre tous les cas de figure du rétrécissement de la largeur sans laisser de blanc sur la hauteur.
Modifié par Olivier C (30 Jun 2024 - 13:18)