Singkatan Latar Belakang CSS hadir di browser WebKit seluler

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 singkat background.
  • Tetapkan background-size di akhir, dengan kekhususan lebih tinggi daripada aturan CSS lain yang menetapkan background pada elemen tersebut, dan jangan lupa untuk memeriksa dan :hover aturan.
  • Terapkan properti !important ke background-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