Penasaran dan rasa kecewa menggerogoti hati tatkala background blog nggak sesuai dengan lebar halaman blog? Background blog kebesaran? He ...he ... atau mungkin justru kekecilan? Pssssstttt ... nggak perlu marah-marah atau kecewa! Atasi saja dengan menambah sedikit kode CSS background-size property. Nggak percaya? Ho ... ho ... coba saja! Eit... tapi jangan lupa update terus browser-nya dengan yang terbaru. CSS3 tabu untuk dibuka dengan browser-browser yang sudah ketinggalan "sepur". Haiya... Oke?!

Kode CSS background-size property sangat tepat bila digunakan sobat-sobat blogger yang menggunakan background image sebagai latar-belakang/background blog, terlebih bagi yang saat ini menggunakan template blogger dari "New Blogger Templates" ((NBT). Yah..., karena sebagin besar NBT menggunakan image sebagai background body, yang bahkan kebetulan semua background image yang digunakan berukuran jumbo dan berakibat tidak seluruh bagian gambar terlihat di halaman blog. Sebagai perumpamaan, jika misalnya background image yang digunakan berupa gambar sampeyan sendiri yang lagi makan jengkol, maka mungkin yang terlihat hanya berupa muka sampeyan "yang mirip jengkol", sedang jengkolnya sendiri hilang karena background yang kebesaran. Perlu diketahui bahwa background image yang ada di NBT rata-rata menggunakan ukuran lebar sebesar 1800px, sedang sebenarnya yang dibutuhkan 1024px (sesuai lebar layar dan coba bayangkan apabila gambar yang tersedia lebarnya 1800px, maka berapa bagian gambar yang akan hilang?).

Kode CSS Background Size Property

Kode CSS background size property di sini berfungsi untuk merubah ukuran background image secara otomatis agar sesuai dengan ruang yang tersedia. Jadi ketika kita gunakan di bagian body (sebagai background body) maka biar selebar apapun ukuran gambarnya, maka akan terlihat dihalaman blog sesuai lebar body yang digunakan (:sesuai lebar halaman blog!). Ada dua Kode CSS yang bisa digunakan, silahkan pilih salah satu!

Kose CSS yang ini digunakan untuk NBT

Kode CSS I

body{
      background-attachment:fixed;
      background-size:cover;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}

Kode CSS II

body{
     background-attachment:fixed;
     background-size:1024px auto;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}

Jika diperhatikan di NBT kode CSS syntax body adalah seperti ini (ini hanya satu contoh dari "Travel" NBT)

body {
     font: $(body.font);
     color: $(body.text.color);
     background: $(body.background);
}

Letakkan CSS I atau CSS II tepat di bawahnya sehingga menjadi seperti berikut:

body {
     font: $(body.font);
     color: $(body.text.color);
     background: $(body.background);
}
body{
     background-attachment:fixed;
     background-size:cover;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}

Atau bisa juga digabungkan sekalian menjadi seperti berikut:

body {
     font: $(body.font);
     color: $(body.text.color);
     background: $(body.background);
     background-attachment:fixed;
     background-size:cover;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}

Silahkan lakukan cara yang sama untuk penggunaan kode CSS II.