A principios de este año, WebKit actualizó el comportamiento de la propiedad abreviada background
de CSS. Con este cambio, la propiedad de abreviatura background
restablecerá background-size
a su valor predeterminado de auto auto
si no se establece en la declaración de abreviatura. Este cambio permite que Chrome y otros navegadores WebKit cumplan con la especificación y coincidan con el comportamiento de Firefox, Opera y Internet Explorer.
Dado que Chrome para Android avanza a las revisiones actuales de WebKit, este cambio ahora se está implementando en Android. Dado que esta fue una corrección de WebKit, es probable que los sitios que se probaron en varios navegadores no se vean afectados.
Forma anterior de hacer las cosas
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
La propiedad abreviada background
no contiene ninguna propiedad de tamaño y, por lo tanto, restablecerá background-size
a su valor predeterminado de auto auto
.
Forma correcta de especificar el tamaño de la imagen
// 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;
}
En fooB
, especificar un background-size
en la abreviatura background
requiere que primero se especifique position
(0%), seguido de una barra diagonal y, luego, background-size
(50 px 40 px).
Correcciones para el código existente
Existen varias opciones que te permitirán solucionar este problema fácilmente:
- Usa
background-image
en lugar de la propiedad abreviadabackground
. - Establece
background-size
como último, con una especificidad más alta que cualquier otra regla de CSS que establezcabackground
en ese elemento y no olvides verificar las reglas:hover
. - Aplica la propiedad
!important
abackground-size
. - Mueve la información de tamaño a la propiedad abreviada
background
.
Bonificación: Desplazamientos de la imagen de fondo
Además de este cambio, ahora hay una mayor flexibilidad para posicionar la imagen dentro del fondo. Antes, solo podías especificar la posición de la imagen en relación con la esquina superior izquierda, ahora puedes especificar un desplazamiento desde los bordes del contenedor. Por ejemplo, si configuras background-position: right 5px bottom 5px;
, la imagen se colocará a 5 px del borde derecho y a 5 px de la parte inferior. Consulta este ejemplo en JSBin.