background-size - Propriété CSS
Résumé des caractéristiques de la propriété background-size
auto
| contain
| cover
auto
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
SVG
peuvent 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
.
x
et y
sont des dimensions, respectivement dans le sens horizontal et dans le sens vertical.
Si les arrière-plans sont multiples, les valeurs peuvent être répétées, en les séparant par une virgule.
background-size:
;
- background-size: auto;
auto
est 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-size
redimensionne 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-repeat
pour gérer la répétition de l'arrière-plan).
Si l'arrière-plan n'a pas de dimensions intrinsèques,contain
est équivalent àauto
. - background-size: 100px;
background-size
utilisée avec une valeur numérique unique : un nombre, positif ou égal à zéro, avec son unité de dimension (voir les unités CSS 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-size
utilisé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 CSS 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-size
utilisé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
. - background-size:
initial
; background-size:inherit
; background-size:revert
; background-size:revert-layer
; background-size:unset
;La valeur initiale est :
.auto
Manipulation de la propriété background-size
par programme.
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 kebab-case 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).
function setBackgroundSize(el) {
el.style['background-size']='cover';
}
function setBackgroundSize(el) {
el.style.backgroundSize='cover';
}
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 à une classe.
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.).
function getBackgroundSize(el) {
return el.style['background-size'];
}
function getBackgroundSize(el) {
return el.style.backgroundSize;
}
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.
function getBackgroundSize(el) {
return window.getComputedStyle(el).getPropertyValue('background-size');
}
Avec JQuery, modifier la valeur de la propriété background-size
pour un élément el
:
function setBackgroundSize(el) {
$(el).css('background-size','cover');
}
function setBackgroundSize(el) {
$(el).css('backgroundSize','cover');
}
Avec JQuery, lire la valeur calculée de la propriété background-size
d'un élément el
peut se faire avec l'un ou l'autre
des codes suivants.
function getBackgroundSize(el) {
return $(el).css('background-size');
}
function setBackgroundSize(el) {
return $(el).css('backgroundSize');
}
Simulateur.
Prise en charge par les navigateurs (compatibilité).
La propriété background-size
ne présente pas de problème de compatibilité sur l'ensemble des navigateurs actuels.
background-size
.
contain
et cover
dans la syntaxe de background-size
.
background-size
contain
cover
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que background-size
.
Les spécifications CSS éditées par le W3C sont organisées en modules. background-size
fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.