Background size et position

Par liyo liyo, il y a 7 ans

Les bases HTML/CSS

Bonjour,

Voila je ne comprends pas trop les valeurs contain et cover..

Je vais essayer de m'expliquer:

J ai une image d arriere plan disons de 150 px width *150 px height.

imaginons j ai un conteneur de 300px width et height:150 px

div{
width:300px;
height:150px;
background-image:url('imagefond.jpg');
background-repeat:no-repeat;
}

Si je comprends bien , la chose importante a prendre en compte est le ratio longueur/largeur de l image et du conteneur

si je fais :
-background-size:cover; =>il me donnera que la moitié de l'image en hauteur et couvrira toute la hauteur.

si je fais :
-background-size: contain:il me donnera toute l image sur 150px *150 px

Mais je comprends pas le background-position avec un background size a cover ou contain

merci

1 réponse

friant, il y a 7 ans

Salut,

Grosso merdo, les valeurs "cover" et "contain" vont prendre le pas sur le comportement de background-position.

  • background-size:cover => cela dit à l'image de couvrir toute la zone quite à cropper en haut & bas OU à droite et à gauche.
  • background-size: contain => cela dit à l'image d'être contenue en entier dans la zone. Quite à laisser du blanc.

Je n'ai pas testé, là maintenant, le mélange avec background-position. Mais fais un test avec et sans background-position.
Je pense que la source de ton soucis vient du fait que comprenais mal les valeurs cover & contain.