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á el background-size a su valor predeterminado de auto auto si no se establece en la declaración de abreviación. Con este cambio, Chrome y otros navegadores WebKit cumplen con la especificación y coinciden con el comportamiento de Firefox, Internet Explorer y Opera.

Con Chrome para Android avanzando hacia las revisiones actuales en WebKit, este cambio ahora se implementa en Android. Como se trata de una solución para webkit, es probable que los sitios que se probaron en varios navegadores no se vean afectados.

La antigua forma de trabajar

// background-size is reset to auto auto by the background shorthand
.foo {
    background-size: 50px 40px;
    background: url(foo.png) no-repeat;
}

La propiedad de la abreviatura 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, para especificar una background-size en la abreviatura background, es necesario especificar primero el position (0%), seguido de una barra diagonal y, luego, el background-size (50 px 40 px).

Correcciones del código existente

Existen varias opciones que te permitirán solucionar este problema fácilmente:

• Usa background-image en lugar de la propiedad de abreviatura background.
• Establece el background-size en último lugar, con una especificidad más alta que cualquier otra regla de CSS que establezca background en ese elemento, y no olvides revisar las reglas :hover.
• Aplica la propiedad !important a background-size.
• Mueve la información de tamaño a la propiedad de abreviatura background.

Contenido adicional: compensaciones de imagen de fondo

Además de este cambio, ahora hay una mayor flexibilidad para posicionar la imagen dentro del fondo. Antes, solo se podía especificar la posición de la imagen en relación con la esquina superior izquierda, pero ahora se puede especificar un desplazamiento respecto de los bordes del contenedor. Por ejemplo, si se configura background-position: right 5px bottom 5px;, la imagen se posicionará a 5 px del borde derecho y a 5 px desde la parte inferior. Consulta esta muestra en JSBin.