Cepat meski berantakan: Contoh memberi frame pada gambar

Memasukkan gambar pada blog/ web dengan frame gambar yang telah ditentukan sebelumnya bisa dikerjakan dengan cepat dan mudah.

Misal, kita ingin membuat gambar yang berukuran 320x240 pixel dan beralamat (URL) di https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg berikut ini sebagai frame


Dan juga telah menyiapkan gambar berukuran 290x200 pixel yang beralamat di http://2.bp.blogspot.com/-tA-ot6Og21w/TDPpVNOXQkI/AAAAAAAAABQ/O03yvzb2Qa8/s1600/Warung+sayur+lengkap berikut ini sebagai isinya


Maka yang perlu dilakukan adalah membuat blok div yang berukuran sama dengan gambar frame (320x240) sebagai tempat gambar tersebut dan menjadikan gambar frame tersebut sebagai background-nya

daftar style untuk yang digunakan:

Style	Value
background-image	url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg')
background-position	center center
background-repeat	none
height	320px
width	240px

kode:

<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg'); background-position: center center; background-repeat: none; height: 320px; width: 240px;"> 
</div>

Dan memasukkan gambar isi kedalam blok div tersebut dengan menggunakan tag img

Property	Value
src	http://2.bp.blogspot.com/-tA-ot6Og21w/TDPpVNOXQkI/AAAAAAAAABQ/O03yvzb2Qa8/s1600/Warung+sayur+lengkap

Style	Value
background-repeat	none
height	290px
width	200px
margin-left	20px
margin-top	13px
position	absolute

kode:

<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg'); background-position: center center; background-repeat: none; height: 320px; width: 240px;"> 
<img src="http://2.bp.blogspot.com/-tA-ot6Og21w/TDPpVNOXQkI/AAAAAAAAABQ/O03yvzb2Qa8/s1600/Warung+sayur+lengkap" style="height: 290px; margin-left: 20px; margin-top: 13px; position: absolute; width: 200px;" /> 
</div>

Margin bisa dimainkan dengan mudah untuk mencoba variasi peletakan gambar isi.

Jika dirasa perbedaan antara frame dengan gambar didalamnya kurang jelas, bisa ditambahkan border pada gambar isi


Tambahan style:

Style	Nilai
border	2px solid black

kode:

<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqzgaXK0WFlL-KBcTP64qrIytNHmRVJcBcWSNIphKpWnZBZ2UV3Dbz9n0WzYSHxCbUZF2uxCScm-sffZHmnHltJvo9ikYGzwVLGqf0zLX1A1OYpcRhXu7O9_dw10IM1dyRtT8a6MdXhjA/s320/29062011165.jpg'); background-position: center center; background-repeat: none; height: 320px; width: 240px;"> 
<img src="http://2.bp.blogspot.com/-tA-ot6Og21w/TDPpVNOXQkI/AAAAAAAAABQ/O03yvzb2Qa8/s1600/Warung+sayur+lengkap" style="height: 290px; margin-left: 20px; margin-top: 13px; position: absolute; width: 200px;" /> 
</div>