» » » Membuat Teks Area Dengan Background/Latar Belakang

Berbahasa Resmi
Artikel kali ini akan dibahas tentang bagaimana cara membuat teks area denagn latar belakang/background. Mungkin cara ini sudah bayak diterapkan oleh blog/situs lain, tetapi ini hanya sebagai acuan saja.
Dan sebagai bahan post kembali untuk lebih mempelajarinya.

Sekarang mari langsung menuju inti dari topik, berikut adalah kode pembangun untuk sebuah teks area dengan background/latar belakang.

Kode: dengan 1 gambar kanan bawah
<textarea div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(250, 246, 250) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLwVAGt2a6MYmDNNuY1AkInK4Yjleas12KnHzB95Pw_CkyyDvsxxSUJ4RI22RCUFxo_Yt2s5Ij0p2xmVrx8BoRFJVPWL8FNwGZ7MEtHa6ZrZiDG-gdwDmtDa0aPECBokDqUEMO98_KyI/s1600/photo-newsinfopedia.jpg) no-repeat scroll right bottom; border: 2px solid rgb(245, 219, 0); height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 358px;">Masukan Teks atau Kode pada kotak ini</textarea>
Catatan: teks yang diberi warna merah tebal adalah alamat url latar belakang. Anda bisa ganti alamat tersebut.

Hasil:


___________________________________________________________________


Kode: dengan gambar penuh

<textarea div="" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjLwVAGt2a6MYmDNNuY1AkInK4Yjleas12KnHzB95Pw_CkyyDvsxxSUJ4RI22RCUFxo_Yt2s5Ij0p2xmVrx8BoRFJVPWL8FNwGZ7MEtHa6ZrZiDG-gdwDmtDa0aPECBokDqUEMO98_KyI/s1600/photo-newsinfopedia.jpg) repeat scroll right bottom; border: 2px solid rgb(245, 219, 0); color: white; height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 358px;">Masukan Teks atau Kode pada kotak ini</textarea>
Catatan: teks yang diberi warna merah tebal adalah alamat url latar belakang. Anda bisa ganti alamat tersebut.

Hasil:
Share: