Tulisan Dengan Background Gambar

Membuat tulisan dengan background gambar. Maksudnya adalah kita meletakan tulisan dilatarbelakangi oleh sebuah gambar. Dengan adanya latar belakang gambar ini akan membuat tulisan lebih menarik untuk dilihat dan kemudian dibaca. Untuk dapat membuat tulisan dengan background gambar ini diperlukan sedikit pengetahuan tentang CSS.   

Terkadang kita sering menemukan sebuah tulisan dengan latar belakang yang bergambar, biasanya tulisan tersebut berupa tulisan puisi atau kode html dan lain sebagainya. Cara Membuat Tulisan Diatas Background Gambar ini dimaksudkan untuk membuat sebuah tulisan intisari yang berbeda dengan tulisan yang lainnya, selain itu Dengan Membuat Tulisan Dengan Background Gambar juga tentunya akan mempercantik pada tulisan itu sendiri.. Untuk membuat tullisan ini diperlukan sebuah gambar sebagai latar belakangnya, gambar yang saya gunakan berukuran 625px x 507px. Jika gambar tersebut terlalu besar silahkan anda ubah ukuranya menyesuaikan dengan template blog anda. transbox  (kotak tulisan) lebar :500px; tinggi :390px;margin atas :50px margin bawah 50px; warna background-color:#fffff; Berikut adalah kode css dari tulisan tersebut :

Silahkan anda lakukan modifikasi pada kode CSS tersebut, sesuaikan dengan kebutuhan anda. Pada kode CSS tersebut saya menggunakan warna kuning sebagai garis tepi dengan ukuran 2px(border: 2px solid yellow) dan border-radius: 10px. Dari kode css di atas akan dihasilkan tulisan seperti di bawah ini :

<style type="text/css">div.background  {  width:625px;  height:507px;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpCMEmEeQfZrdW9eJ1OUmw-Y6FijM4kN-gFh5qm07OfSAOQaoNQe7NSPLNXdcb7lOXNX50AFAPnWKD3tF1xjInwcvKe-VLj3sVuCXp1hhgTyGy-eJXtN2c80OyN-JcxuUdtIO7YHd_zZN/s1600/Bunga.jpg) repeat;  border:2px solid blue;  }div.transbox  {  width:500px;  height:390px;  margin:50px 50px;  background-color:#fffff;  border:2px solid yellow;border-radius :10px;  opacity:0.9;  filter:alpha(opacity=80);    }div.transbox p  {  margin:10px 10px;  font-weight:bold;  color:#000000;  }</style><div class="background"><div class="transbox"><span style="color: red;">PENERIMAAN(Khairil Anwar)Kalau kau mau kuterima kau kembaliDengan sepenuh hatiAku masih tetap sendiriKutahu kau bukan yang dulu lagiBak kembang sari sudah terbagiJangan tunduk! Tentang aku dengan beraniKalau kau mau kuterima kembaliUntukku sendiri tapiSedang dengan cermin aku enggan berbagi.Maret 1943</span></div></div>

PENERIMAAN
(Khairil Anwar)

Kalau kau mau kuterima kau kembali
Dengan sepenuh hati

Aku masih tetap sendiri

Kutahu kau bukan yang dulu lagi
Bak kembang sari sudah terbagi

Jangan tunduk! Tentang aku dengan berani

Kalau kau mau kuterima kembali
Untukku sendiri tapi

Sedang dengan cermin aku enggan berbagi.

Maret 1943