Menggunakan Gambar Untuk Latar Belakang Blog

Selain menggunakan warna untuk latar belakang blog, anda juga bisa menggunakan gambar sebagai latar belakang blog. Bahasa inggris dikatakan background image untuk blog. Gambar ini bisa diatur seperti wallpaper dan dapat diatur dengan posisi vertikal atau horisontal serta model lainnya. Nah, dalam posting ini saya akan menjelaskan bagaimana anda dapat menggunakan gambar sebagai latar belakang blog dengan cara yang berbeda-beda. Biasanya gambar disimpan dalam ekstensi berformat JPEG, GIF dan BMP. Pertama sekali anda harus meng-upload gambar ke server atau tempat hosting gambar. Saya mengunakan blogger dan kadang-kadang pakai photobucket atau tinypic. Nah, banyak situs image hosting gratis, anda tinggal pilih saja di mana gambar akan diupload dan hosting.

Sebelum menggunakan gambar sebagai background untuk blog, anda harus memilih gambar yang tepat untuk blog (sesuaikan dengan template blog) dan tulis alamat penyimpanan gambar tersebut. Misalnya seperti ini http://www.HostingGambarAnda.com/namagambar.jpg sebagai alamat gambar. Nah, seperti yang saya katakan di atas, ada beberapa cara untuk menggunakan gambar sebagai latar belakang atau background image untuk blog. Oke saya urutkan sebagai berikut :

• Gambar latar belakang menutupi seluruh halaman (repeat tiled background image)
• Gambar latar belakang vertikal menutupi halaman (tiled the image vertically)
• Gambar latar belakang horisontal menutupi halaman (tiled the image horizontally)
• Gambar Latar Belakang Tidak Bergerak (fixed image background)

Gambar latar belakang menutupi seluruh halaman (repeat tiled background image)

Cara ini adalah cara yang paling sederhana dari semua model efek gambar untuk latar belakang blog. Banyak orang yang suka dengan gambar berukuran kecil sebagai latar belakang blog. Hal ini bertujuan untuk menjaga kecepatan membuka halaman blog agar tetap ringan dan cepat karena gambar yang digunakan berukuran sangat kecil. Anda dapat menggunakan google untuk mencari gambar berukuran kecil dengan keyword "tileable background" atau bisa membuatnya sendiri dengan program image editor seperti coreldraw, photoshop dan program lainnya yang dikuasai dan tersedia di komputer anda. Oke, contohnya seperti gambar di bawah ini :


Untuk membuat gambar ini dengan repeat tiled background, maka yang perlu dilakukan adalah dengan masuk ke blog dengan id blog anda dan tuju edit HTML. Carilah kode yang mirip dengan kode di bawah ini :

body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Nah, anda hanya perlu menambahkan kode untuk background image sperti yang saya tandai dengan warna merah seperti di bawah ini :

body {
background:url(http://www.HostingGambarAnda.com/namagambar.jpg);
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Ganti URL gambar dengan lokasi penyimpanan gambar anda. Perintah di atas akan membuat gambar secara berulang menutupi seluruh halaman depan blog anda seperti gambar di bawah ini :


Gambar latar belakang vertikal menutupi halaman (tiled the image vertically)

Mirip dengan cara pertama. Carilah kode seperti di atas dan atur pada bagian background. Tambahkan alamat url penyimpanan gambar anda. Untuk perintah background diulang vertikal maka tambahkan kode "y" seperti berikut :

body {
background:url(http://www.HostingGambarAnda.com/namagambar.jpg) repeat-y;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Dengan menggunakan contoh gambar yang sama maka hasilnya akan seperti di bawah ini :


Gambar latar belakang horisontal menutupi halaman (tiled the image horizontally)

Hampir sama dengan cara vertikal, hanya saja yang perlu ditambahkan adalah perintah dengan tambahan kode "x" seperti berikut :

body {
background:url(http://www.HostingGambarAnda.com/namagambar.jpg) repeat-x;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Masih dengan contoh yang sama, maka hasilnya dapat dilihat seperti di bawah ini :


Gambar latar belakang tidak bergerak (fixed image background)

Maksudnya adalah, gambar latar belakang tidak ikut bergerak ketika anda menggerakkan kursor (scroling) ke atas bawah. Untuk ini biasanya digunakan gambar berukuran besar. Nah, sebagai contoh saya menggunakan gambar di bawah ini untuk latar belakang :


Untuk memastikan gambar tidak berulang seperti pada tiga model sebelumnya, maka perlu ditambahkan perintah "no-repeat" pada background. Selain itu perlu ditambahkan perintah "fixed" supaya gambar tidak bergerak ketika kursor digerakkan ke atas bawah. Berikut penulisan kode lengkap dengan tambahan yang saya beri pada warna merah :

body {
background:url(http://www.HostingGambarAnda.com/namagambar.jpg) no-repeat;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed }

Dan hasilnya seperti di bawah ini.


Menggabungkan warna dan gambar untuk latar belakang

Jika anda memilih cara vertikal dan cara horisontal maka area yang belum tertutupi otomatis akan berwarna putih. Nah, untuk mengganti warna putih tersebut, anda hanya perlu menambahkan kode warna yang sesuai dengan gambar latar belakang cukup dengan penambahan kode seperti ini :

background: $bgcolor url(http://www.HostingGambarAnda.com/namagambar.jpg) repeat-x;

Ganti nilai kode warna dan sesuaikan dengan gambar tadi yang menjadi latar belakang. Misalnya seperti kode di bawah ini :

background: #81F7F3 url(http://www.HostingGambarAnda.com/namagambar.jpg) repeat-x;

Silahkan bereksperimen dengan kode warna yang saya buat agar perpaduannya bisa cocok.

Mengatur posisi gambar latar belakang pada template blog

Secara default, gambar latar belakang akan dimulai dari sudut kiri atas halaman, terlepas dari bagaimana anda mengatur gambar latar belakang berulang/repeat atau tidak berulang. Namun anda dapat menentukan di mana posisi gambar ingin ditempatkan hanya dengan menambahkan variabel untuk spesifikasi latar belakang. Berikut adalah contoh penempatan posisi gambar latar belakang seperti yang saya beri warna merah:

background: #81F7F3 url(http://www.HostingGambarAnda.com/namagambar.jpg) variabel posisi di sini no-repeat;

Silahkan ganti nilai variabel untuk posisi gambar di atas dengan pilihan perintah di bawah ini :

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

Misalnya anda ingin menempatkan gambar berada di atas tengah dan tidak bergerak atau fixed image, maka anda bisa menggunakan perintah ini :

background; url(http://www.HostingGambarAnda.com/namagambar.jpg) no-repeat top center;

Anda juga bisa mengatur posisi awal dari gambar latar belakang dengan menggunakan persentase pada sumbu X atau Y, atau dengan menentukan jarak dalam pixel dari bagian atas atau kiri halaman. Namun hasilnya akan sangat tergantung dari browser dan resolusi layar yang dipakai pengguna internet. Browser yang berbeda akan menampilkan desain blog yang berbeda pula. Tutorial background ini bisa anda modifikasi lagi dengan kreatifitas sendiri . Misalnya anda ingin membuat background pada sidebar, header dan footer blog. Bahkan anda bisa membuat background image untuk posting blog, serta modifikasi lainnya. Intinya, kode-kode untuk membuat latar belakang yang harus ditambahkan hampir sama dengan kode CSS background image seperti di atas. Mudah-mudahan tutorial ini dapat membantu dalam memahami cara menggunakan gambar latar belakang untuk blog dan efek penempatan gambar tersebut. Seperti biasa, jika anda merasa tutorial ini bermanfaat, silahkan memberikan komentar di bawah ini. Terima kasih.

Related Post:

Trik Blogspot

• Menambahkan Image Pada Judul Posting
• Mengganti Pager Link Blogger Dengan Icon
• Klik Label Tampil Hanya Judul Posting Update
• Klik Label Tampil Hanya Judul Posting
• Menambahkan Icon Pada Label Dan Link Sidebar
• Mengganti Tanggal Dengan Icon Kalender
• Menghilangkan Icon QuickEdit (Tang dan Obeng)
• Area Sidebar Dalam Kotak Terpisah
• Area Komentar Dalam Kotak Terpisah
• Area Posting Dalam Kotak Terpisah
• Background Warna Pada Teks Posting
• Modifikasi Pesan Pengantar Formulir Komentar
• Beda Tampilan Komentar Pemilik Blog
• Nomor Urut Komentar (Numbering Comment) Blogger
• Pasang Emoticon Di Atas Kotak Komentar
• Membuat Blockquote Dan Modifikasi Blockquote
• Masalah Pada Verifikasi Kotak Komentar
• Membuat Teks Berkedip Blink Text
• Membuat Horizontal Navigasi Blogger
• Avatar Profil Komentar Blogger Update
• Latar Belakang Teks Dengan Efek Stabilo
• Pasang Strip-Ad Seperti Navbar Blogger
• Menghilangkan Border Pada Image Posting
• Modifikasi Border Photo Profil Blogger

or or