Membuat Background 1 Halaman Penuh Dengan HTML

No comment 248 views
banner 468x60

Kode HTML Membuat Background. Anda pasti udah paham dengan apa yang saya maksud, yaitu bagaimana sich cara kita membuat background dengan 1 halaman penuh. awalnya sich saya sich emang tidak bisa melakukan ini, berhubung saya bekerja di bidang ini. mau ga mau saya harus juga belajar. tuntutan pekerjaan ……… !

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.

Yang perlu dilakukan adalah 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.

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

sedikit mudah bukan belajar kode HTML. Kode HTML Membuat Background 1 Halaman Penuh ini saya pelajari ketika awal masuk kerja. karena basic saya bukan di webmaster, sedikit kesusahan awalnya. 

(Visited 48 times, 1 visits today)
Film Bioskop Online
author
Author: