Cara masukkan background pada tulisan

Background Berwarna

Cara masukkan kaler di belakang tulisan.


<p style="background-color:yellow;">This text has a background color applied.</p>
contoh:

This text has a background color applied.

Gambar Background
Cara masukkan latar belakang bergambar di belakang tulisan.
1. Upload gambar di mana2 hosting contoh macam flickr, photobucket dan lain2.
2. Kemudian masukkan link didalam ‘gambar anda’ contoh dibawah.


<p style="height:100px;background-image:url(/pix/smile.gif);">Text ini ada gambar dibelakangnya.</p>



gambar Background berulang

1. Upload gambar di mana2 hosting contoh macam flickr, photobucket dan lain2.
2. Kemudian masukkan link didalam ‘gambaranda’ contoh dibawah.
3. Ubah ‘background-repeat’, samada ‘repeat’ atau ‘no-repeat’

<p style="height:100px;background-image:url(gambaranda.gif);background-repeat:no-repeat;">Gambar ini tidak berulang. </p>



Kedudukan gambar Background
Tetapan kedudukan bagi gambar latar belakang tulisan

<p style="height:100px;background-image:url(/pix/smile.gif);background-repeat:no-repeat;background-position:100px;">text ini berada 100px dari kiri. </p>


gambar Background tetap

Macam mana nak jadikan gambar tidak ikut text apabila tulisan digerakkan.

<p style="height:100px;width:150px;overflow:scroll;background-image:url(/pix/smile.gif);background-attachment:fixed;">gambar ni lekat dibelakang tulisan dan tidak akan ikut tulisan apabila discroll kebawah atau keatas</p>



KOD RINGKAS
1. Kod ini ringkas.
2. Menetapkan semua fungsi gambar background dalam satu kod.
3. Kod yg boleh diubah;

Height(tinggi), Width (lebar) , Background url (nama url gambar, contoh: http://namawebsite.com/rumah.jpeg) , Repeat (berulang) , no-repeat (xberulang) , Fixed (tetap),

<p style="height:100px;width:150px;overflow:scroll;background:url(/pix/smile.gif) repeat fixed;">Tulisan ini telah ditetapkan oleh kod ringkas.</p>