background-size CSS propriété

Définition de la CSS background-size.

La propriété d'Arrière-plan CSS background-size permet de modifier la taille des ou de l'image d'arrière-plan à l'intérieur de la zone d'arrière plan spécifiée par la propriété Css background-clip. L'image de fond est déclarée avec la propriété CSS background-image ou background.

Exemple de syntaxe CSS background-size :

background-size : contain;
background-size : cover;
background-size : auto;
background-size : 10px 50%;
background-size : 50% auto;

La propriété de feuille de style background-size CSS peut prendre une/des valeurs de taille :

auto : la taille de l'image d'arrière-plan garde sa taille initiale. Valeur par défaut, revient mettre auto auto.
contain : la taille de l'image d'arrière-plan s'adapte à la taille de la zone d'arrière plan sans déformation.
cover : la taille de l'image de fond couvre toute la largeur et la hauteur de la zone d'arrière plan sans déformation. L'image de fond peut être rognée si elle est plus grande.
nombre nombre : deux nombres positifs suivis d'une unité CSS de longueur, ils représentent dans l'ordre : la longueur de l'image d'arrière-plan et la hauteur de l'image d'arrière-plan. Si l'unité est en pourcentage (%), la valeur est calculée en fonction de la taille de la zone d'arrière-plan.
nombre peut aussi prendre la valeur de "auto". Si on ne met qu'un seul nombre, cela revient a mettre deux nombres identiques

Exemple de code background-size CSS

Conditions d'application de la CSS background-size.

La propriété CSS background-size est applicable sur toutes les balises (X)HTML ayant une image d'arrière plan.

La valeur de la CSS background-size peut être mise directement dans la propriété de raccourci CSS background.

Problème d'interprétation de background-size en Css.

La propriété de feuille de style background-size CSS n'est pas reconnue par les anciens navigateurs.

Conditions d'animation de background-size en CSS3.

La CSS background-size est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour background-size.

Règles de la Css background-size relatives aux arrière-plans multiples

Dans le cadre des images d'arrière-plans multiples, vous pouvez pour chaque image déclarée dans la Css background-image spécifier la taille dans background-size.
Chaque taille doit être séparée par une virgule (,).

Exemples schématiques d'une assignation de répétition d'images d'arrière plan :

background-image : declaration-image-1, declaration-image-2, declaration-image-3, declaration-image-4;
background-size : size-declaration-image-1, size-declaration-image-2, size-declaration-image-3, size-declaration-image-4;

Compatibilités navigateurs de la propriété background-size

Détails des versions de la CSS background-size: Propriété background-size est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS background-size: Propriété CSS background-size est compatible à partir de Chrome 3; Propriété CSS background-size est compatible à partir de Firefox 9; Propriété CSS background-size est compatible à partir de Internet Explorer 9; Propriété CSS background-size est compatible à partir de Opera 10; Propriété CSS background-size est compatible à partir de Safari 4

Votre avis sur la définition background-size en CSS

Votez pour la définition CSS `background-size`

Votes: 4.1 / 5 - 24 votes
Cliquez sur une étoile pour voter.