Cara Menambahkan Background Gambar Pada Postingan

Siapa sih yg ndak pengin tulisan-tulisannya dibaca, disukai dan kemudian dikomentari banyak pengunjung. Siapapun pasti pengin lah ya... ndak peduli itu blogger kawakan maupun blogger newbie seperti saya ini.
Yup... saya akan selalu berusaha bagaimana supaya tulisan saya menjadi lebih menarik dan tidak membosankan. Apapun caranya, pasti itu akan saya lakukan demi membuat tulisan saya menjadi nyaman untuk dinikmati. Mulai dari mencari topik yg ndak terlalu memberatkan, memilih kata-kata yg tepat dan tidak berbelit-belit, menyisipkan beberapa gambar menarik dan bahkan terkadang juga perlu menambahkan background pada postingan-postingan tertentu.

Nah beberapa waktu yg lalu, ketika saya nekad menyatakan cinta pada pujaan hati saya melalui sebuah surat "Untuk Tyas Mirasih Sang Pujaan Hati", seorang sahabat Cantik bertanya, gimana sih Kang cara menambahkan background gambar pada postingan seperti itu?

hmmmmmm..... sebenarnya ini adalah pekerjaan yg sangat mudah dan tentu saja sama sekali tidak membebani kita dalam menulis. Langkah pertama yg harus kita lakukan adalah menyiapkan gambarnya.

Siapkan gambar yg tentu saja harus sesuai dengan topik yg sedang kita bahas. Usahakan gambar tidak terlalu tajam dan mendominasi. Simpan gambar tersebut di tempat yg biasa kalian gunakan untuk meng-upload gambar lalu ambil URLnya.
Jangan lupa untuk menyesuaikan ukuran gambar dengan lebar main wraper dan panjang postingan, jika kalian pengin menambahkan background gambar tunggal atau no-repeat. Untuk ukuran gambar, lebih besar sedikit itu akan lebih baik daripada kurang. Gunakan resize pada tool-tool image editor, atur contrasnya kalo gambar masih terlalu tajam.
Kalo sudah... sekarang awali postingan kalian dengan kode, <div style="background: URL(http://url.gambarkalian.com) no-repeat center bottom; padding: 10px;" align="justify"> tulis isi postingan kalian disini. Sebagai contoh, lihat previewnya disini atau disini.
Penjelasan :
- http://url.gambarkalian.com adalah lokasi dimana gambar kalian tersimpan
- no-repeat adalah untuk menampilkan hanya satu gambar (gambar tidak diulang-ulang)
- center bottom adalah letak posisi gambar ada di tengah bawah
- padding: 10px adalah jarak tulisan dari garis batas pinggir
- align="justify" adalah pengatur kerataan paragraf, bisa juga diganti left untuk rata kiri, right untuk rata kanan atau center untuk rata tengah.

Atur semuanya sesuai dengan keinginan kalian dan kalo sudah, jangan lupa tutup postingan tersebut dengan kode </div>.
Nah... demikian tadi sedikit penjelasan mengenai cara menambahkan background gambar pada postingan. Dan untuk penambahan background gambar yg di repeat, resize gambar dan pengaturan posisi tidak diperlukan lagi. Langsung saja gunakan kode seperti ini, <div style="background: URL(http://url.gambarkalian.com) repeat; padding: 10px;" align="justify">
Dan hasilnya akan menjadi seperti pemajangan award berikut ini.

Ini adalah award dari Neng Yolisz. Happy 1st anniversary buat Coretan Kehidupanku...


Award yg kedua, saya terima dari Mas Ayas, terimakasih


Dan yg terakhir ini adalah award dari Kucing Tengil

Oke teman-teman... sampai disini dulu postingan saya kali ini, ketemu lagi dipostingan berikutnya.
Semoga bermanfaat...

---

Related Posts :