Cara Mengganti Background Blog Dengan Gambar Sendiri

Setelah posting sebelumnya mengenai mengganti background dengan warna, sekarang adalah tentang cara mengganti background dengan gambar. Background dengan gambar sebenarnya si lebih indah dan menarik bagi saya, namun demi pertimbangan kecepatan loading blog jadi saya menggunakan warna saja. Tapi bila ukuran gambarnya tidak terlalu besar tidak apa apa kok, masih lancar bila diakses dengan kecepatan internet indonesia sekarang.

Lihat : Cara Mudah Mengganti Warna Background di Blog

Salah satu permasalahan penggunaan gambar dalam background blog adalah kode Css nya. Bila hanya menggunakan kode body{url (alamat_gambar)} saja, background blog tidak akan terlihat rapi. Diperlukan beberapa perintah agar gambar background fit dengan layar serta posisi yang pas di tengah.

Selain itu pastikan juga apakah gambar yang digunakan memang cocok untuk tampilan blog, jangan sampai keberadaan gambar tersebut malah menyakiti mata dan membuat pengunjung tidak nyaman. Pilihlah gambar yang cocok dengan template serta cocok dengan tema blog yang diangkat.

Menggunakan Gambar Sebagai Background Blog

Usahakan ukuran blog tidak lebih dari 100kb agar waktu loading blog tidak terlalu lama, kalau memang blog kamu menggunakan gambar yang ukurannya lumayan besar seperti wallpaper misalnya, maka sebaiknya kompres gambar tersebut untuk mendapatkan ukuran yang lebih kecil. Kamu bisa mencarinya di pencarian gambar google dengan kata kunci blog background atau terserah anda.

• Pertama buka template editor blogger dengan cara masuk menu Template kemudian klik Edit Template
• Selanjutnya cari kode CSS body{ dengan cara tekan tombol ctrl+f agar lebih cepat
• Masukan kode berikut kedalam kode body{

background: url(alamat_gambar_background);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100%;
height: 100%;

• Ganti alamat_gambar_background dengan url gambar background anda seperti ini url(http://wallpoper.com/images/00/33/67/06/persona-3_00336706.jpg);
• Bentuk kodenya nanti akan seperti ini
• Silahkan klik Simpan Template untuk menyimpan perubahan.
• Berikut ini adalah contoh blog demo sebelum dan sesudah backgroundnya diganti. Dari yang dulunya hanya sekedar warna menjadi menggunakan gambar.

• Sampai sini langkah penggantian background sudah selesai. Anda bisa mengganti backgroundnya lagi bila dirasa kurang cocok dengan tampilan blog.

Untuk memunculkan efek gambar muncul berulang-ulang saat di scroll, hilangkan kode background-repeat: no-repeat pada kode body{. Namun bila gambar anda seperti blog demo diatas sebaiknya jangan karena hasilnya akan jelek. Cari gambar yang memang cocok bila nanti di scroll.

Sampai sini saja postingan kali ini. Apabila ada yang kurang dimengerti silahkan tanyakan di kolom komentar. Bila bermanfaat silahkan di share. Semoga sukses dan Terima Kasih.