Background Gambar

4:01 AM
Selain menggunakan warna, properti background bisa juga menggunakan gambar sebagai latar belakang. Kita bisa menggunakan properti background atau background-image. Properti tersebut harus digunakan bersama dengan Fungsi "url".

Background dengan Satu Gambar.

Background dengan satu gambar tanpa perulangan bisa diberikan pada elemen HTML hanya dengan menggunakan properti background-image. Selain itu, ukuran gambar latar belakang bisa diatur dengan menggunakan background-size.
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
    .styleku{
        background-color : yellow
     }
    .styleku1{
        background : url("background.jpg");
        background-size : cover;
    }
    .styleku2{
        background-image : url("background.jpg");
        background-size : contain;
     }

     .styleku3{
        background-image : url("background.jpg");
        background-size : 100% 100%;
     }
    </style>
</HEAD>
<BODY class="styleku">
    <H2>Jenis huruf</H2>
    <div class ="styleku1">
        <p>
            Ini adalah paragraf 1.
        </p>
        <p>
            Ini adalah paragraf 2.
        </p>
        <p>
            Ini adalah paragraf 3.
        </p>
    </div>
    <div class ="styleku2">
        <p>
            Ini adalah paragraf 1.
        </p>
        <p>
            Ini adalah paragraf 2.
        </p>
        <p>
            Ini adalah paragraf 3.
        </p>
    </div>
    <div class ="styleku3">
        <p>
            Ini adalah paragraf 1.
        </p>
        <p>
            Ini adalah paragraf 2.
        </p>
        <p>
            Ini adalah paragraf 3.
        </p>
    </div>
</BODY>
</HTML>

Kode HTML di atas memberikan warna merah pada seluruh halaman karena tag <body> memiliki class "styleku1" yang properti backgroundnya bernilai "yellow". Supaya hasilnya sesuai harapan, pastikan ada gambar dengan nama "background.jpg" di folder yang sama dengan file html tersebut.

Properti Background-size

Background pada kode HTML di atas juga diatur panjang dan lebarnya dengan background-size yang berisi persentase berdasarkan "tempat" meletakkan background tersebut. Selain menggunakan nilai panjang dan lebar; background-size juga bisa punya nilai-nilai berikut ini.
  1. auto : ukuran gambar otomatis disesuaikan oleh browser.
  2. cover : Gambar akan diperbesar atau diperkecil ukurannya agar sesuai dengan ukuran panjang atau lebar tempatnya. Jika ukuran gambar melebihi tempatnya, gambar akan dipotong bagian bawah atau kanannya.
  3. contain : Gambar terlihat seluruhnya tanpa memotongnya sedikitpun.
  4. initial : ukuran gambar relatif sesuai bawaan browser
  5. inherit : Ukuran gambar mengikuti nilai background-size dari elemen parent yg mengapitnya.
Kalau keterangan setiap properti kurang jelas, lebih baik coba langsung satu persatu di dalam kode HTML.

Properti Bacground-repeat

Berikutnya, kita akan belajar cara menggunakan satu gambar yang diulang-ulang sebagai latar belakang. 
<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
        .styleku1{
            background-image : url("background.jpg");
            background-repeat : repeat-x;
        }

        .styleku2{
            background-image : url("background.jpg");
            background-repeat : repeat-y;
        }

        .styleku3{
            background-image : url("background.jpg");
            background-repeat : repeat;
        }

        .styleku4{
            background-image : url("background.jpg");
            background-repeat : no-repeat;
        }
    </style>
</HEAD>
<BODY>
    <H2>Belajar HTML</H2>
    <div class ="styleku1">
        <p>
            Ini adalah paragraf 1. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 2. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 3. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
    </div>
    <div class = "styleku2">
        <p>
            Ini adalah paragraf 4. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 5. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 6. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
    </div>
    <div class = "styleku3">
        <p>
            Ini adalah paragraf 7. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 8. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 9. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
    </div>
    <div class = "styleku4">
        <p>
            Ini adalah paragraf 10. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 11. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 12. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
    </div>
</BODY>
</HTML>

Pada contoh kode HTML di atas ada beberapa class yang memiliki properti background-repeat dengan nilai yang berbeda-beda. Nilai yang diberikan pada properti tersebut mempengaruhi arah perulangan gambar pada latar belakang. Properti tersebut bisa menggunakan salah satu nilai di bawah ini. 

  1. repeat
  2. repeat-x
  3. repeat-y
  4. no-repeat

Properti Background-attachment

Properti background attachment digunakan untuk menentukan apakah background mengikuti isi elemen yang memiliki background tersebut atau hanya menetap di tempat saat halaman discroll. Nilainya bisa berupa 

  • local : gambar akan discroll bersama dengan isi elemen HTML.
  • fixed : Gambar latar belakang menetap walaupun halaman discroll.
  • scroll : Gambar latar belakang bergerak mengikuti seluruh isi halaman yang discroll.
  • initial 
  • inherit

Kode HTML-nya bisa kalian lihat di bawah ini.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
     body *{
         background-attachment:fixed;
            background-image : url("background.jpg");
            background-repeat : repeat;
            color : orange;
        }
        
    </style>
</HEAD>
<BODY>
    <H2>Belajar HTML</H2>
    <div class ="styleku1">
        <p>
            Ini adalah paragraf 1. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
    </div>
    <div class = "styleku2">
        <p>
            Ini adalah paragraf 2. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 3. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 4. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
    </div>
    <div class = "styleku3">
        <p>
            Ini adalah paragraf 5. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 6. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 7. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
    </div>
    <div class = "styleku4">
        <p>
            Ini adalah paragraf 8. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 9. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
        <p>
            Ini adalah paragraf 10. ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
        </p>
    </div>
</BODY>
</HTML>


Saat menggunakan properti background-attachment dengan nilai fixed, background akan menetap saat discroll. Ini beda dengan properti scroll yang akan membuat gambar terlihat menyatu dengan teks sehingga gambar akan mengikuti teks saat discroll. 

Karena saya malas copas kode yang sama hanya untuk mengubah satu nilai CSS, kalian bisa mengganti sendiri nilai fixed menjadi scroll.


Subscribe to: Post Comments (Atom)