Background-size - Propriété CSS
Résumé des caractéristiques de la propriété background-size
auto | contain | coverautoSchéma de la syntaxe de background-size.
background-sizeLes liens du schéma donnent accès à plus de détails
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
length-xetlength-ysont des valeurs numériques positives ou nulles, suivies d'une des unités de dimension.%-xest un pourcentage calculé par rapport à la largeur de l'élément.%-yest calculé par rapport à la hauteur de l'élément.- S'il y a plusieurs arrière-plans, les valeurs peuvent être répétées, en les séparant par une virgule.
Description de la propriété background-size.
background-size est la propriété CSS qui définit les dimensions de l'image d'arrière-plan.
Le comportement de la propriété background-size est fortement lié à la présence ou à l'absence de dimensions définies dans l'arrière-plan choisi
(dimensions intrinsèques).
- Les images (fichiers jpeg, jpg, png, gif...) ont nécessairement des dimensions intrinsèques.
- Les dégradés n'ont pas de dimensions intrinsèques.
- Les fichiers
SVGpeuvent avoir ou non des dimensions intrinsèques.
Si vous souhaitez consulter des explications générales sur les arrière-plans en CSS, reportez-vous à la page background.
Syntaxes de background-size.
- background-size: auto;
autoest la valeur par défaut pourbackground-size.
Si l'arrière-plan est une image, donc avec des dimensions intrinsèques, les dimensions de l'arrière-plan seront celles de l'image originale.
Si l'arrière-plan choisi n'a pas de dimensions intrinsèques, il sera dimensionné à la même taille que l'élément. - background-size: cover;
Avec la valeur
cover,background-sizeredimensionne l'arrière-plan pour couvrir toute la surface de l'élément.
Si l'arrière-plan est une image et que la ratio de l'image est différent de celui de l'élément, une partie de l'image ne sera pas affichée.
Si l'arrière-plan n'a pas de dimensions intrinsèques, cover est équivalent àauto. - background-size: contain;
L'arrière-plan est redimensionné pour être totalement visible.
Si l'arrière-plan est une image et que la ratio de l'image est différent de celui de l'élément, l'image peut être répétée ou bien une partie de l'élément ne sera pas couverte par l'image (voirbackground-repeatpour gérer la répétition de l'arrière-plan).
Si l'arrière-plan n'a pas de dimensions intrinsèques,containest équivalent àauto. - background-size: 100px;
background-sizeutilisée avec une valeur numérique unique : un nombre, positif ou égal à zéro, avec son unité de dimension (voir les unités de dimension). S'il s'agit d'un pourcentage il sera calculé par rapport à la largeur de l'élément.
Cette valeur sera utilisée pour dimensionner la largeur de l'image d'arrière-plan.
S'il s'agit d'une image, donc avec des dimensions intrinsèques, la hauteur sera calculée pour conserver les proportions de l'image originale.
Si l'arrière-plan n'a pas de dimensions intrinsèques,la hauteur sera calculée en fonction des proportions de l'élément. - background-size: 100px 50px;
background-sizeutilisée avec deux valeurs numériques séparées par un espace. Deux nombres, positifs ou égaux à zéro, avec leur unité de dimension (voir les unités de dimension).
La première valeur indique la largeur de l'arrière-plan ; la deuxième valeur sa hauteur.
S'il s'agit de pourcentages, le premier est calculé par rapport à la largeur de l'élément, et le deuxième par rapport à sa hauteur.
- background-size: 100px 50px, cover, 100% 100%;
background-sizeutilisée avec une série de valeurs, chacune d'elles étant séparée des autres par une virgule. Cette syntaxe est utilisable lorsque plusieurs arrière-plans ont été définis. Reportez-vous à la pagebackground.
Valeurs globales
(communes à toutes les propriétés)
background-size: initial (auto)
background-size: inherit
background-size: revert
background-size: revertLayer
background-size: unset
Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.
Accéder à la propriété background-size par programme.
Changer la taille de l'arrière-plan, avec Javascript.
En Javascript, la valeur de la propriété background-size peut être modifiée avec l'un des codes ci-dessous.
On voit que Javascript propose une syntaxe avec la notation {abbrKebabCase} typique de CSS (un tiret pour séparer les mots), et une autre syntaxe
avec la notation camel-case plus courante en Javascript (une majuscule pour séparer les mots).
let el = document.getElementById('id');
el.style['background-size'] = 'cover';
// ou
let el = document.getElementById('id');
el.style.backgroundSize = 'cover';
Relire la taille de l'arrière-plan en Javascript.
En Javascript, voici comment lire la valeur de background-size.
La valeur n'est récupérable que si la propriété a été affectée directement à l'élément lui-même et pas via un sélecteur CSS.
La valeur est renvoyée exactement comme elle a été définie dans la feuille de styles (un mot clé, une paire de valeurs, etc.).
let el = document.getElementById('id');
let value = el.style['background-size'];
// ou
let el = document.getElementById('id');
let value = el.style.backgroundSize;
Lire la valeur calculée de background-size en Javascript.
La valeur calculée de background-size peut être retrouvée avec le code ci-après.
Le résultat est soit un mot clé (auto, cover, contain, etc.), soit une paire de valeurs numériques en pixels,
quelque soit l'unité utilisée dans la feuille de styles.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background-size');
Changer la taille de l'arrière-plan avec JQuery.
Avec JQuery, voici un exemple de code pour modifier la valeur de la propriété background-size.
$('#id').css('background-size', 'cover');
// ou
$('#id').css('backgroundSize', 'cover');
Lire la valeur calculée de background-size avec JQuery.
Avec JQuery, lire la valeur calculée de la propriété background-size peut se faire avec l'un ou l'autre de ces codes.
let value = $('#id').css('background-size');
Autres exemples de code.
Trouvez d'autres exemples de code Javascript et JQuery sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété background-size et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de background-size. On constate en particulier
que les pourcentages sont bien mémorisés en tant que pourcentages (voir le chapitre sur l'héritage).
Toutes les autres unités sont converties en pixels. Les valeurs prédéfinies sont bien sûr conservées en l'état.
Exemple interactif avec la propriété background-size.
Compatibilité des navigateurs avec background-size.
La propriété background-size ne présente pas de problème de compatibilité sur l'ensemble des navigateurs actuels.
background-size pour définir la taille des images d'arrière-plan.background-sizeNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Firefox
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Histoire de la propriété background-size.
-
Module CSS - Arrière-plans et bordures - Niveau 3
Définition initiale de la propriétébackground-size.
02 Août 2002Document de travail.
17 Décembre 2009Candidat à la recommandation.
Voir aussi, au sujet des arrière-plans.
Tout ce qui concerne les arrière-plans et les bordures et décrit dans la spécification CSS Backgrounds and Borders Module du W3C. Voici les principales propriétés décrites dans cette norme.