Senin, 10 September 2012

Teknik Membuat Latar Belakang 1 Halaman Penuh

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.
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!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.
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    * {
        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.
    ?
    1
    2
    3
    4
    5
    <div id="cont">
        <div class="box">
              <!-- content in here -->
        </div>
    </div>
  4. Untuk CSS-nya, tambahkan juga ke dalam file CSS sebelumnya.
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    #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.
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!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.
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <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.
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)