Cara Membuat Background Blog Pas Sesuai Ukuran

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!

Kode CSS yang 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.

CARA MENYIMPAN KODE CSS

1. Login ke Blogger dengan cara menuliskan Email Address, Password kemudian klik LOGIN
2. Setelah DASBOARD (Dasbor) terbuka, klik "DESIGN" (Rancangan).
3. KLIK "Edit HTML" kemudian lanjutkan klik "DOWNLOAD FULL TEMPLATE" (Download Template Lengkap) untuk melakukan penganmanan terhadap template (back-up templates). Simpan file template di folder PC.
4. Setelah file template tersimpan dengan aman, silahkan lihat kembali kode-kode di "Edit HTML" kemudian cari syntax body (gunakan CTRL + F untuk mempermudah pencarian )
   Contoh:
   
   body {
   font: $(body.font);
   color: $(body.text.color);
   background: $(body.background);
   }
5. Tambahkan kode baru di bawahnya atau sesuai contoh di atas.
6. KLIK "SAVE TEMPLATE".

Catatan - Keterangan

1. Kode CSS I akan membuat lebar background image secara otomatis selebar body/halaman blog.
2. Kode CSS II diset pada width=1024px. Untuk lebar yang berbeda bisa dilakukan perubahan nilai guna penyesuaian.
3. Jika kode background size dari IE 8 mau diabaikan, silahkan buang kode :
   
   filter: progid:DXImage .... dan -ms-filter: "progid:DXImage ....
4. Jika menghendaki kode background size untuk IE 8 dan digunakan di NBT, anda bisa mencari URL background body-nya di Variable definitions yang terletak di bagian atas template. Untuk lebih jelasnya bisa membaca panduan yang berkaitan dengan hal tersebut melalui link di bawah ini :
   
   Panduan Merubah Background Lewat Variable Definitions
5. Penggunaan pada desain blog/template secara umum menggunakan kode seperti di bawah ini :
   
   
   
   body{

        background:#fff url(.../images/bg_body.jpg);

        background-position:left top;

        background-repeat:no-repeat;

        background-attachment:fixed;

        background-size:cover; /* atau background-size:1024px auto; */

        margin:0; /* in IE */

        padding:0; /* in IE */

        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 dalam bentuk berbeda

   body{

        background:#fff url(.../images/bg_body.jpg) center center no-repeat fixed;

        background-size:cover; /* atau background-size:1024px auto; */

        margin:0; /* in IE */

        padding:0; /* in IE */

        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 */

   }