Awal tahun ini, WebKit memperbarui perilaku properti singkat background
CSS. Dengan perubahan ini, properti singkat background
akan mereset background-size
ke nilai default auto auto
jika tidak disetel dalam deklarasi singkat. Perubahan ini menghadirkan Chrome dan browser WebKit lainnya sesuai dengan spesifikasi dan sesuai dengan perilaku Firefox, Opera, dan Internet Explorer.
Dengan Chrome untuk Android yang beralih ke revisi saat ini pada WebKit, perubahan ini sekarang diluncurkan di Android. Karena ini adalah perbaikan untuk webkit, situs yang diuji di beberapa browser kemungkinan tidak akan 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 singkat background
tidak berisi properti ukuran apa pun sehingga akan mereset background-size
ke nilai defaultnya yaitu auto auto
.
Cara menentukan ukuran gambar yang benar
// 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;
}
Dalam fooB
, menentukan background-size
dalam singkatan background
mengharuskan position
(0%) ditentukan terlebih dahulu, diikuti dengan garis miring, lalu background-size
(50 piksel 40 piksel).
Perbaikan untuk kode yang ada
Ada beberapa opsi yang akan memberikan perbaikan mudah untuk masalah ini:
- Gunakan
background-image
, bukan properti singkatbackground
. - Tetapkan
background-size
di akhir, dengan kekhususan lebih tinggi daripada aturan CSS lain yang menetapkanbackground
pada elemen tersebut, dan jangan lupa untuk memeriksa dan:hover
aturan. - Terapkan properti
!important
kebackground-size
. - Pindahkan informasi ukuran ke properti singkat
background
.
Bonus: offset gambar latar belakang
Selain perubahan ini, pemosisian gambar di latar belakang kini memiliki fleksibilitas yang lebih besar. Sebelumnya, Anda hanya dapat menentukan posisi gambar relatif dari sudut kiri atas, sekarang Anda dapat menentukan offset dari tepi container. Misalnya, dengan menyetel background-position: right 5px bottom 5px;
, gambar akan diposisikan 5 piksel dari tepi kanan dan 5 piksel dari bawah. Lihat contoh di JSBin ini