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:
kode:
Dan memasukkan gambar isi kedalam blok div tersebut dengan menggunakan tag img
kode:
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:
kode:
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>
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>
Komentar
Posting Komentar