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 vai redefinir o background-size para o valor padrão de auto auto se ele não for definido na declaração abreviada. Essa mudança faz com que o Chrome e outros navegadores WebKit estejam em conformidade com a especificação e correspondam ao comportamento do Firefox, Opera e Internet Explorer.

Como o Chrome para Android está avançando para as revisões atuais do WebKit, essa mudança 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 auto auto.

Forma 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 o background-size (50 px 40 px).

Correções para o código atual

Há várias opções que vão resolver isso de forma fácil:

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

Bônus: deslocamentos de imagem de plano de fundo

Além dessa mudança, agora há mais flexibilidade para posicionar a imagem no plano de fundo. Antes, só era possível especificar a posição da imagem em relação ao canto superior esquerdo. Agora, é possível especificar um deslocamento em relação às 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 5 px da parte de baixo. Confira este exemplo no JSBin.