Attribut background-size CSS

Définition et utilisation

background-size L'attribut définit la taille de l'image de fond.

Manuel de référence HTML DOM :Attribut backgroundSize

Définir la taille de l'image de fond :

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

background-size: length|percentage|cover|contain;

Valeur	Description	Test
length	Définissez la hauteur et la largeur de l'image de fond. La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est définie, la deuxième valeur sera définie sur "auto".	Test
percentage	Définissez la largeur et la hauteur de l'image de fond en pourcentage de l'élément parent. La première valeur définit la largeur, la deuxième valeur définit la hauteur. Si une seule valeur est définie, la deuxième valeur sera définie sur "auto".	Test
cover	Étendez l'image de fond suffisamment pour que l'image de fond couvre complètement la zone de fond. Certaines parties de l'image de fond peuvent ne pas être affichées dans la zone de positionnement de l'image de fond.	Test
contain	Étendez l'image pour qu'elle atteigne la taille maximale, de sorte que sa largeur et sa hauteur s'adaptent complètement à la zone de contenu.	Test

Valeur par défaut :	auto
Héritabilité :	non
Version :	CSS3
Syntaxe JavaScript :	object.style.backgroundSize="60px 80px"

Étirez l'image de fond: Étirez l'image de fond pour couvrir complètement la zone de contenu.
Étirez l'image de fond pour copier l'image de fond horizontalement quatre fois: Étirez l'image de fond pour que l'image de fond soit copiée horizontalement exactement quatre fois.

Les numéros dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.

Chrome	Edge	Firefox	Safari	Opera
Chrome	IE / Edge	Firefox	Safari	Opera
4.0 1.0 -webkit-	9.0	4.0 3.6 -moz-	4.1 3.0 -webkit-	10.5 10.0 -o-