All'inizio dell'anno, WebKit ha aggiornato il comportamento della proprietà abbreviata CSS background
. Con questa modifica, la proprietà di scorciatoia background
reimposta background-size
sul valore predefinito auto auto
se non è impostato nella dichiarazione di scorciatoia. Questa modifica rende Chrome e altri browser WebKit conformi alla specifica e corrisponde al comportamento di Firefox, Opera e Internet Explorer.
Poiché Chrome per Android passerà alle revisioni correnti di WebKit, questa modifica è ora in fase di implementazione in Android. Poiché si tratta di una correzione di WebKit, è probabile che i siti testati in più browser non siano interessati.
Vecchio modo di fare le cose
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
La proprietà abbreviata background
non contiene alcuna proprietà size e reimposta quindi background-size
sul valore predefinito auto auto
.
Modo corretto per specificare le dimensioni delle immagini
// 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;
}
In fooB
, per specificare un background-size
nella scorciatoia background
è necessario specificare prima position
(0%), seguito da una barra e poi da background-size
(50px 40px).
Correzioni per il codice esistente
Esistono diverse opzioni che ti consentono di risolvere facilmente il problema:
- Utilizza
background-image
anziché la proprietà abbreviatabackground
. - Imposta
background-size
per ultimo, con una specificità superiore a quella di qualsiasi altra regola CSS che impostabackground
su quell'elemento e non dimenticare di controllare le regole:hover
. - Applica la proprietà
!important
abackground-size
. - Sposta le informazioni sulle dimensioni nella proprietà abbreviata
background
.
Bonus: offset delle immagini di sfondo
Oltre a questa modifica, ora è possibile posizionare l'immagine nello sfondo con maggiore flessibilità. In passato, potevi specificare solo la posizione dell'immagine rispetto all'angolo in alto a sinistra, ora puoi specificare un offset rispetto ai bordi del contenitore. Ad esempio, impostando background-position: right 5px bottom 5px;
, l'immagine verrà posizionata a 5 pixel dal bordo destro e a 5 pixel dal basso. Dai un'occhiata a questo esempio su JSBin