Abreviação de plano de fundo CSS chegando aos navegadores WebKit para dispositivos móveis

Pete LePage

No início deste ano, o WebKit atualizou o comportamento da propriedade abreviada background do CSS. Com essa mudança, a propriedade abreviada background redefinirá o background-size para o valor padrão de auto auto se ele não estiver definido na declaração abreviada. Essa alteração coloca o Chrome e outros navegadores WebKit em conformidade com a especificação e corresponde ao comportamento do Firefox, Opera e Internet Explorer.

Com o Google Chrome para Android avançando para as revisões atuais do WebKit, essa alteração está sendo lançada no Android. Como essa foi uma correção do webkit, os sites testados em vários navegadores provavelmente não foram afetados.

Maneira antiga de fazer as coisas

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

A propriedade abreviada background não contém nenhuma propriedade de tamanho e, portanto, redefinirá o background-size para o valor padrão de auto auto.

Maneira correta de especificar o tamanho da imagem

// 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;
}

Em fooB, a especificação de um background-size na abreviação background exige que o position (0%) seja especificado primeiro, seguido por uma barra e depois background-size (50 px 40 px).

Correções para o código existente

Existem várias opções para uma solução fácil para esse problema:

• Use background-image em vez da propriedade abreviada background.
• Defina a background-size por último, com uma especificidade maior do que qualquer outra regra de CSS que define background nesse elemento. Não se esqueça de verificar as regras :hover.
• Aplique a propriedade !important a background-size.
• Mova as informações de dimensionamento para a propriedade abreviada background.

Bônus: deslocamentos da imagem de plano de fundo

Além dessa mudança, agora há maior flexibilidade para posicionar a imagem em segundo plano. Antes, você só podia especificar a posição da imagem em relação ao canto superior esquerdo. Agora, é possível especificar um deslocamento das bordas do contêiner. Por exemplo, ao definir background-position: right 5px bottom 5px;, a imagem será posicionada a 5 px da borda direita e a 5 px da parte de baixo. Confira esta amostra no JSBin