Repost dari artikel saya di PC Mild 20/2010
Anda pasti pernah menemukan website dengan latar belakang berupa gambar satu halaman penuh. Salah satu contoh website tersebut adalah http://ringvemedia.com. Kendala yang muncul adalah bagaimana menempatkan gambar tersebut agar bisa selalu tepat meskipun jendela browser di-resize.

Halaman penuh
Ada beberapa langkah yang bisa dilakukan untuk dapat membuat full page background. Konsepnya adalah sebagai berikut.
- Isi keseluruhan halaman dengan gambar, tanpa white-space.
- Ubah ukuran (scale) gambar sesuai kebutuhan.
- Pertahankan proporsi gambar
- Gambar diletakkan di tengah-tengah halaman.
- Tidak boleh menyebabkan munculnya scrollbar.
- Harus kompatibel di berbagai browser.
Urutan langkah tersebut cukup panjang. Ada satu hal dasar, karena gambar harus diubah ukurannya, maka Anda tidak bisa menggunakan property CSS background-image seperti biasa. Anda tetap harus menggunakan inline-image, atau gambar dalam tag html.
Teknik 1
Teknik pertama ini menggunakan tag img dalam html. Gambar yang akan dijadikan background diletakkan dalam wrapper sedemikian rupa.
- Langkah awal, buatlah struktur html sederhana seperti dalam kode di bawah ini.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Full page background</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" charset="utf-8" href="style.css" /> </head> <body> <div id="bg"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="images/bg.jpg" alt=""/> </td> </tr> </table> </div> </div> </body> </html>
- Kode di atas hanya menampilkan gambar biasa dalam halaman website, namun tanpa mengatur ukurannya. Setelah itu, untuk mengatur CSS-nya, diletakkan dalam file terpisah.
* { margin: 0; padding: 0; } html, body, #bg, #bg table, #bg td { height:100%; width:100%; overflow:hidden; } #bg { position: fixed; } #bg div { height:200%; left:-50%; position:absolute; top:-50%; width:200%; } #bg td { text-align:center; vertical-align:middle; } #bg img { margin:0 auto; min-height:50%; min-width:50%; }
Cukup mudah bukan? Dengan demikian gambar latar belakang akan berubah ukuran sesuai dengan ukuran jendela browser.
- Untuk menambahkan content di dalamnya, cukup menambahkan wrapper untuk content di luar wrapper background, seperti kode di bawah ini.
<div id="cont"> <div class="box"> <!-- content in here --> </div> </div>
- Untuk CSS-nya, tambahkan juga ke dalam file CSS sebelumnya.
#cont { position:absolute; top:0;left:0; z-index:70; overflow: auto; width: 100%; height: 100%; } .box { margin: 0 auto; width: 400px; padding: 50px; background: white; padding-bottom:100px; font: 14px/2.8 Georgia, Serif; } #focus-stealer { position: absolute; left: -9999px; }
Teknik 2
Selain menggunakan teknik pertama tadi, ada teknik lain yang relatif lebih efisien. Dengan teknik ini, tidak perlu untuk memasukkan tag background ke dalam wrapper yang terlalu rumit.
- Yang perlu dilakukan adalah cukup membuat tag img biasa, dengan sebuah class “bg” tambahan untuk mengatur style-nya.
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Full Page Background Image, Teknik #2</title> </head> <body> <img src="images/bg.jpg" class="bg" alt="back" /> <div id="content"> <!-- content in here --> </div> </body> </html>
- Setelah itu, Anda harus membuat CSS untuk mengatur ukuran dan letak background tersebut. CSS bisa diletakkan terpisah, atau dalam file html yang sama. Dalam contoh ini, CSS diletakkan dalam tag head html.
<style type="text/css" media="screen"> img.bg { /* aturan untuk full background */ min-height: 100%; min-width: 1024px; /* scale secara proporsional */ width: 100%; height: auto; /* mengatur posisi */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } div#content { /* This is the only important rule */ /* We need our content to show up on top of the background */ position: relative; /* hanya untuk style, tidak memberi dampak pada fungsional */ width: 500px; margin: 0 auto; background: #fff; padding: 20px; font-family: helvetica, arial, sans-serif; font-size: 10pt; line-height: 16pt; -moz-box-shadow: #000 4px 4px 10px; -webkit-box-shadow: #000 4px 4px 10px; } body { /* hanya untuk style, tidak memberi dampak pada fungsional */ margin: 0; padding: 20px 0 0 0; } </style>

Tampilan hasil akhir
Hasil percobaan seperti pada gambar. Selamat mencoba.
Download source code keseluruhan.Artikel ini telah dipublikasikan di media cetak tabloid PC Mild edisi 21 tahun 2010 lalu.Referensi: http://css-tricks.com/. Berdasarkan tweet dari @arlingga, teknik ini tidak cross browser.
nice post gan,,,thank ilmunya
Ehm ribet amat ya… Hehe…
Salam sayang dari BURUNG HANTU… Cuit… Cuit… Cuit…
Joss mas tutorialnya…
wuaduh, ada masternya datang ke sini.. jadi malu.. masih bagusan tutorialnya mas jauhari.. hehe..
Blog http://ringvemedia.com keren banget ya.. Mau dibikinin begitu, hihihi.. *ngirian* 😀
jiah, malah ngomenin blog lainnya.. minta dibikinin aja sama sananya.. haha..
keren tutornya mantap ilmunya moga bermanfaat
mantaap…terima kasih untuk informasinya,,,,,,,,,
terimakasih ya…akhirnya dengan sedikit merubah “height: auto;” karena image background nya ada yang terpotong, menjadi “height: 100%;”
sekali lagi terimakasih….mantapp buanget pencerahannya…kalo boleh tolong dilihat website kami yang sedang diperbaiki…mudah2an ada saran2 tau tip yang dapat kmi pakai agar lebih baik (banyak pengunjungnya, cepat loadingnya dan bermanfaat).
Saya biasa pakai property css3,
background-size:cover
. Hasilnya sip, sesuai yang diinginkan, dan support browser lumayan luas 🙂udah cari referensinya, dan wow, itu keren.. 😀
posting ini kan ditulis waktu belum ada support css3 itu.. 😀
I think wow rotlk deserves 1st place…
nice info gan, terimakasih banyak sudah berbagi.
Keren mas saya lagi nyari nyari ini ni untuk bahan pelajaran,nice info mas
nah nie die susah kalau udah berurusan dengan kode nie…hi
trims mau saya coba…
waaah.. keren nih…
makasih mas atas tutorialnya.
Mantab, lagi ngetrend sekarang, eh ini tutorial tahun 2011 ya, triknya masih kepakai juga 😀
kalau mau menghilangkan sidebar pada halaman posting dan bikin halaman posting fullwidth gimana gan?
by symphony 69
cari masukin CSS sama HTML gimana?
nyimak gan,, sangat super membantu..
Ulasan bermanfaat soal kasur busa ini luar biasa bagus. Keren banget
dan penting diketahui. Semua orang yang pakai maupun lagi cari kasur busa super spt ini di Indonesia harus baca ulasan ini.
Mampir juga situs yamin, banyak artikel menarik yg semoga bermanfaat buat para pengguna kasur busa super.
Thanks.
Artikel bagus tentang kasur busa super ini baru pertama kali saya baca.
Luar biasa banget dan bermanfaat. Semua orang yg pakai ataupun lagi mencari
kasur busa seperti ini di Indonesia wajib baca ulasan ini. Mampir juga website ane yasis, ada ulasan menarik yang pasti berguna buat para pemakai kasur busa super.
Regards.
Ada banyak sekali tekniknya ternyata. Tapi semuanya menggunakan kode2 yang sama sekali saya gak mudeng, hehehe…. harus belajar dulu yah,…tapi tekngkyu banget nih