Na początku tego roku firma WebKit zaktualizowaliśmy działanie właściwości skróconej CSS background
. W ramach tej zmiany skrócona właściwość background
resetuje wartość domyślną elementu background-size
do wartości auto auto
, jeśli nie została ona ustawiona w deklaracji skróconej. Dzięki tej zmianie Chrome i inne przeglądarki WebKit są zgodne ze specyfikacją oraz działają tak samo jak Firefox, Opera i Internet Explorer.
Chrome na Androida jest obecnie wprowadzany w kolejnych wersjach w WebKit, a teraz wprowadzamy tę zmianę w Androidzie. Ta poprawka dotyczyła strony webkit, która prawdopodobnie nie ma wpływu na witryny przetestowane w wielu przeglądarkach.
Dawny sposób robienia rzeczy
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
Skrócona właściwość background
nie zawiera żadnej właściwości rozmiaru i dlatego resetuje background-size
do wartości domyślnej, czyli auto auto
.
Właściwy sposób określania rozmiaru obrazu
// 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;
}
W fooB
określenie elementu background-size
w skrócie background
wymaga najpierw określenia parametru position
(0%), a po nim ukośnika prawego, a następnie background-size
(50 pikseli 40 pikseli).
Poprawki istniejącego kodu
Można to łatwo naprawić na kilka sposobów:
- Używaj pola
background-image
zamiast skróconej właściwościbackground
. - Ustaw
background-size
na końcu z większą precyzją niż inne reguły CSS, które ustawiają dla tego elementu atrybutbackground
. Nie zapomnij sprawdzić tych reguł i reguł:hover
. - Zastosuj właściwość
!important
do elementubackground-size
. - Przenieś informacje o rozmiarze do skróconej właściwości
background
.
Dodatkowo: przesunięcia obrazu tła
Oprócz tej zmiany dostępna jest też większa elastyczność w umieszczeniu obrazu w tle. Wcześniej można było określać położenie obrazu tylko względem lewego górnego rogu, teraz możesz natomiast określić odsunięcie względem krawędzi kontenera. Na przykład przy ustawieniu background-position: right 5px bottom 5px;
obraz zostanie umieszczony w odległości 5 pikseli od prawej krawędzi i 5 pikseli od dołu. Zobacz ten przykład w JSBin