Abreviatura de CSS Background para los navegadores WebKit para dispositivos móviles

Pete LePage

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 abreviada background.
• Establece background-size como último, con una especificidad más alta que cualquier otra regla de CSS que establezca background en ese elemento y no olvides verificar las reglas :hover.
• Aplica la propiedad !important a background-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.