En début d'année, WebKit a mis à jour le comportement de la propriété abrégée CSS background
. Avec cette modification, la propriété abrégée background
réinitialise background-size
sur sa valeur par défaut, auto auto
, si elle n'est pas définie dans la déclaration abrégée. Cette modification rend Chrome et les autres navigateurs WebKit conformes à la spécification et correspond au comportement de Firefox, Opera et Internet Explorer.
Chrome pour Android passant aux versions actuelles de WebKit, ce changement est désormais déployé sur Android. Comme il s'agit d'un correctif pour WebKit, les sites testés dans plusieurs navigateurs ne sont probablement pas concernés.
L'ancienne méthode
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
La propriété abrégée background
ne contient aucune propriété de taille et réinitialise donc background-size
sur sa valeur par défaut, auto auto
.
Méthode correcte pour spécifier la taille de l'image
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
Dans fooB
, pour spécifier un background-size
dans l'abréviation background
, vous devez d'abord spécifier position
(0%), suivi d'une barre oblique, puis de background-size
(50 px 40 px).
Corrections du code existant
Plusieurs solutions permettent de résoudre facilement ce problème:
- Utilisez
background-image
au lieu de la propriété abrégéebackground
. - Définissez
background-size
en dernier, avec une spécificité plus élevée que toute autre règle CSS qui définitbackground
sur cet élément. N'oubliez pas de vérifier les règles:hover
. - Appliquez la propriété
!important
àbackground-size
. - Déplacez les informations de dimensionnement vers la propriété abrégée
background
.
Bonus: décalages d'images de fond
En plus de cette modification, vous pouvez désormais positionner l'image dans l'arrière-plan plus facilement. Auparavant, vous ne pouviez spécifier que la position de l'image par rapport à l'angle supérieur gauche. Vous pouvez désormais spécifier un décalage par rapport aux bords du conteneur. Par exemple, si vous définissez background-position: right 5px bottom 5px;
, l'image sera positionnée à 5 pixels du bord droit et à 5 pixels du bas. Consultez cet exemple sur JSBin.