Teknik Membuat Latar Belakang 1 Halaman Penuh

By Haqqi in Information Technology 24 Comments

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.

  1. Isi keseluruhan halaman dengan gambar, tanpa white-space.
  2. Ubah ukuran (scale) gambar sesuai kebutuhan.
  3. Pertahankan proporsi gambar
  4. Gambar diletakkan di tengah-tengah halaman.
  5. Tidak boleh menyebabkan munculnya scrollbar.
  6. 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.

  1. 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>
  2. 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.

  3. 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>
  4. 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.

  1. 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>
  2. 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.

Related Articles.

24 Comments

  7. Pingback: Teknik Membuat Latar Belakang 1 Halaman Penuh « Adhiyus Blog

  8. 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).

    Reply

  19. 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.

    Reply

  20. 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.

    Reply

Leave a Comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.