<img src="//nojsim.images.xtstatic.com/tp.gif" alt="" />
<img src="//cim.images.xtstatic.com/tp.gif" alt="" />
Background Stretch Code:
<!-- HTML Codes by mike.xtgem.com --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Stretched Background Image</title> <style type="text/css"> /* Hapus margin dari 'html' dan 'body' tag, dan memastikan halaman mengambil ketinggian layar penuh */ html, body {height:100%; margin:0; padding:0;} /* Set the position and dimensions of the background image. */ #page-background {position:fixed; top:0; left:0; width:100%; height:100%;} /* Tentukan posisi dan layering untuk konten yang harus muncul di depan gambar latar belakang. Harus memiliki z-index yang lebih tinggi nilainya daripada gambar latar belakang. Juga menambahkan padding untuk mengkompensasi mengeluarkan margin dari 'html' dan 'body' tag. */ #content {position:relative; z-index:1; padding:10px;} </style> <!-- Kode diatas tidak berfungsi di Internet Explorer 6. Untuk mengatasi hal ini, kami menggunakan komentar bersyarat untuk menentukan alternatif style sheet for IE 6 --> <!--[if IE 6]> <style type="text/css"> html {overflow-y:hidden;} body {overflow-y:auto;} #page-background {position:absolute; z-index:-1;} #content {position:static;padding:10px;} </style> <![endif]--> <script data-cfasync="false" async="async" type="text/javascript" src="//mgyccfrshz.com/q/tdl/95/dnt/2014799/kep.js"></script></head> <body> <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div> <div id="content"> <h2>Stretch that Background Image!</h2> <p>Teks ini muncul di depan gambar latar belakang. Ini karena kita telah menggunakan CSS untuk lapisan isi di depan gambar latar belakang. Gambar latar belakang akan meregangkan agar sesuai dengan jendela browser Anda. Anda dapat melihat gambar tumbuh dan menyusut saat Anda merubah ukuran browser Anda.</p> <p>Ayo, cobalah - ubah ukuran browsermu</p> </div> </body> </html>
Klik Link Ini Untuk Melihat Hasilnya
HOME
Log in
Ring ring
