Cara Membuat Background Pada Tulisan Seri 1

Kebanyakan teks atau tulisan yang kita buat hampir
selalu polos tak berbackground. Sekali-kali kita
tampilkan backgound pada tulisan atau kalimat
yang kita buat agar terlihat lebih menarik
sekaligus untuk mengatasi kejenuhan.

Lihatlah contohnya di bawah ini :

CONTOH 1 (SATU) :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

CONTOH 2 (DUA) :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Langkah membuat hal yang demikian adalah :

1.   Lebih dahulu masuk ke Edit HTML.

2.   Cari tag </head>

3.   Copy kode berikut dan letakkan
      di atas / sebelum tag </head> ini.

<style type="text/css"> 

#div {
width:350px;
height:200px;
padding:5px;
border: 2px solid magenta;
background-origin:border-box;
background-image:url('URL Gambar Anda di sini');
-moz-background-size:100% 100%;
background-repeat:no-repeat;
background-position:left;
}

</style>

KETERANGAN :

Atur width dan heightnya dengan
ukuran yang Anda inginkan.

Aturlah ukuran dan warna bordernya.

Ganti juga gambarnya dengan gambar
yang ingin Anda tampilkan.

Untuk penerapan pada kalimatnya, masukkan kode
berikut ke dalam konten Gadget HTML/JavaScript
atau bisa juga ke dalam postingan Anda.

<div class id="div">
Letakkan kalimat yang Anda tulis di sini.
</div>

KETERANGAN :

Masukkan kalimat yang ingin Anda
tampilkan pada tempat yang tersedia.

Selamat mencoba dan tetap good luck!