Cara menambahkan Background gambar pada Posting

♠ Posted by Unknown in Blogger at 02.37

Hal yang mendasar tapi bisa berguna buat yang baru belajar blogger dan belajar tentang DIV atau Division yaitu Tag HTML yang mempunyai fungsi untuk mengkelompokan atau membagi file fungsi HTML lain yang bisa memudahkan pemberian Style yang berbeda sesuai keinginan pada masing-masing kelompoknya.

kembali ke topik Cara untuk menambahkan Background gambar pada Posting, kita akan pergunakan fungsi div style.

contoh kita akan memberikan Backround Image dari posting berikut ini:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sekarang kita buat div stylenya ataupun pengelompokkannya dengan cara seperti ini:

<div style="background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5Z48p4PFa7PnovllZNrtIVtnuBpPsBYi1HnFcWET2S7nU1E2a487es9R6y0t0YHktUKMn5pSiw5nTozxK0BEqhilq5DMS2TXyjXPmN5HUzeLBLAw9GPq2_ZgWesZQFqJc7-xk8r6LuRs/s1600/bg.jpg) repeat; color: #ffffff; padding:5px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

• Background: url (URL gambar yang diinginkan)
• Repeat ,berfungsi untuk melakukan pengulangan gambar misal jika gambar 250x250 pixel, maka akan diulangi penambahan gambar ke samping , dan kebawah keatas secara berturut-turut. Jika gambar tidak ingin di repeat maka gunakan kode no-repeat. fungsi lainnya repeat-x(hanya keatas kebawah)  dan repeat-y(kesamping kanan dan kiri).
• padding, berfungsi untuk memberikan jarak bagian dalam pada suatu div.
• color, berfungsi untuk memberikan warna teks pada sebuah div.

Hasilnya seperti ini:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum