Background size et position 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

Salut,

Qu'est-ce que tu ne comprend pas ?

Le background-position placera l'image la ou tu lui a demandé comme avant

Dans ton container de 300x150 ton image en "contain" se mettre par défaut au centre (horizontalement) et fera 150x150. Il y a donc 75px de libre de chaque coté et l'image prend 100% de la hauteur. Avec background-position tu peux placer ton image a gauche, a droite, au centre, a un certain nombre de px ou de % comme d'hab (seulement pour l'axe vertical les valeur top bottom et center ne servent à rien dans l'exemple vu que l'image prend toute la hauteur, mais tu peux la déplacer avec un nombre de px ou % par ex).

Qu'est-ce qui te bloque ?

Bon bah ça devait pas t’empêcher de dormir en tout cas !