Awal tahun ini, WebKit memperbarui perilaku properti singkatan background
CSS. Dengan perubahan ini, properti singkatan background
akan mereset background-size
ke nilai defaultnya, yaitu auto auto
, jika tidak ditetapkan dalam deklarasi singkatan. Perubahan ini membuat Chrome dan browser WebKit lainnya mematuhi spesifikasi dan cocok dengan perilaku Firefox, Opera, dan Internet Explorer.
Dengan Chrome untuk Android yang beralih ke revisi saat ini di WebKit, perubahan ini kini diluncurkan di Android. Karena ini adalah perbaikan untuk webkit, situs yang diuji di beberapa browser kemungkinan tidak terpengaruh.
Cara lama dalam melakukan sesuatu
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
Properti singkatan background
tidak berisi properti ukuran apa pun, sehingga akan mereset background-size
ke nilai defaultnya, yaitu auto auto
.
Cara yang benar untuk menentukan ukuran gambar
// 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;
}
Di fooB
, menentukan background-size
dalam singkatan background
mengharuskan position
(0%) ditentukan terlebih dahulu, diikuti dengan garis miring, lalu background-size
(50px 40px).
Perbaikan untuk kode yang ada
Ada beberapa opsi yang akan memberikan perbaikan mudah untuk hal ini:
- Gunakan
background-image
, bukan properti singkatanbackground
. - Tetapkan
background-size
terakhir, dengan kekhususan yang lebih tinggi daripada aturan CSS lainnya yang menetapkanbackground
pada elemen tersebut, dan jangan lupa untuk memeriksa dan aturan:hover
. - Terapkan properti
!important
kebackground-size
. - Pindahkan informasi ukuran ke properti singkatan
background
.
Bonus: offset gambar latar
Selain perubahan ini, kini ada fleksibilitas yang lebih besar dalam memosisikan gambar dalam latar belakang. Sebelumnya, Anda hanya dapat menentukan posisi gambar relatif dari sudut kiri atas, sekarang Anda dapat menentukan offset dari tepi penampung. Misalnya, menyetel background-position: right 5px bottom 5px;
, gambar akan diposisikan 5 px dari tepi kanan dan 5 px dari bawah. Lihat contoh di JSBin ini