Tutorial CSS, Membuat Multiple Background dengan CSS3

Tutorial CSS, Membuat Multiple Background dengan CSS3

Background merupakan sebuah fitur CSS yang hampir tak pernah ditinggalkan dalam pembuatan tampilan website. Dengan background, kita dapat memasang latar belakang baik berupa gambar (background-image)…

Background merupakan sebuah fitur CSS yang hampir tak pernah ditinggalkan dalam pembuatan tampilan website. Dengan background, kita dapat memasang latar belakang baik berupa gambar (background-image) maupun warna (background-color) pada sebuah elemen website.

Munculnya CSS3 membawa berbagai macam fitur baru bagi pemrograman tampilan website. Walaupun banyak orang yang masih ragu menggunakan CSS3 karena masalah daya dukung dari berbagai macam browser yang masih bervariasi, namun dapat diakui CSS3 telah membawa perubahan yang menjanjikan. Salah satu fitur yang sangat menarik terkait dengan CSS background adalah multiple background.

Apa Itu Multiple Background?

Multiple background adalah kemampuan untuk mendefinisikan lebih dari satu gambar latar belakang untuk sebuah elemen. Sebelum ada fitur ini, untuk membuat latar belakang yang memiliki efek layer atau lapisan diperlukan nesting elemen dalam elemen dengan banyak kode CSS untuk tiap elemennya. Namun, dengan fitur multiple background pada CSS3 ini, hanya dibutuhkan pendefinisian tiap nilai gambar latar belakang dengan dipisahkan tanda koma jika Anda ingin menghasilkan efek layer yang sama. Wow!

Bagaimana Cara Menggunakannya?

Seperti keterangan di awal, untuk menggunakan multiple background hanya dibutuhkan definisi tiap background-image yang dipisahkan dengan tanda koma. Multiple background dapat didefinisikan sendiri-sendiri untuk tiap properti, atau dapat menggunakan shorthand properti background.

Menggunakan Definisi Properti Tunggal

Dengan metode pendefinisian properti satu-satu, multiple background didefinisikan dengan pembatas berupa koma di antara tiap nilai background-image yang digunakan. Lihat contoh kode di bawah.

background-image: url(‘img/obscerote.png’), url(‘img/sky.jpg’);

Urutan gambar latar belakang yang ditampilkan pada elemen website berdasar pada urutan penulisan nilai pada properti background-image-nya. Nilai yang didefinisikan pertama kali akan menghasilkan gambar yang terletak pada lapisan paling atas. Maka, gambar “obscerote.png” akan terletak di atas gambar “sky.jpg”.

Untuk properti latar belakang lainnya yang berkaitan dengan background-image seperti background-repeat dan background-position, didefinisikan dengan cara yang sama dengan background-image dan urutan yang sama sesuai nilai yang berkaitan. Mari simak kode di bawah ini.

background-image: url(‘img/obscerote.png’), url(‘img/sky.jpg’);
background-repeat: no-repeat, repeat-x;
background-position: right center, left;

Menurut kode di atas, gambar “obscerote.png” akan terletak di sebelah kanan tanpa pengulangan, sedangkan gambar “sky.jpg” akan diulang secara horisontal dari kiri. Banyaknya nilai pada tiap properti sebaiknya sama dengan banyaknya nilai pada properti background-image karena tiap nilai akan memberikan hasil yang sesuai dengan urutannya. Apabila jumlah nilai pada properti selain background-image lebih banyak, maka kelebihan properti tersebut akan diabaikan oleh browser. Apabila banyaknya nilai pada properti selain background-image lebih sedikit, akan dilakukan pengulangan baris nilai hingga jumlahnya sama. Untuk lebih jelasnya, mari simak kode di bawah ini.

background-image: url(‘img/obscerote.png’), url(‘img/star.png’), url(‘img/sky.jpg’);
background-repeat: no-repeat, no-repeat, repeat-x, repeat-y;
background-position: right center, left;

Pada contoh di atas, properti background-image memiliki jumlah nilai yang lebih banyak daripada properti background-image, sedangkan properti background-position memiliki jumlah nilai yang lebih sedikit. Kode tersebut akan memberikan hasil yang sama dengan kode di bawah ini pada saat diinterpretasikan oleh browser.

background-image: url(‘img/obscerote.png’), url(‘img/star.png’), url(‘img/sky.jpg’);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right center, left, right center;

Menggunakan Definisi Properti Shorthand

Multiple background juga bisa didefinisikan dengan menggunakan properti shorthand dari background. Pada dasarnya cara ini hampir sama dengan menggunakan metode pendefinisian satu-persatu dengan properti-properti yang terpisah. Namun, semua nilai dan properti latar belakang terletak pada satu properti. Contoh penggunaan properti shorthand dari background dapat dilihat pada kode di bawah ini.

background-image: url(‘img/obscerote.png’) no-repeat right center, url(‘img/sky.jpg’) repeat-x left;

Menurut kode di atas, gambar “obscerote.png” akan terletak di pojok kanan elemen tanpa pengulangan, sedangkan gambar “sky.jpg” akan diulang secara horizontal dari kiri elemen. Dengan menggunakan properti shorthand dari background,  Anda juga bisa menyertakan kode warna latar belakang di akhir baris properti.

Kesimpulan

Menggunakan teknik multiple background memang menyenangkan. Namun, daya dukung browser untuk multiple background pada saat ini masih bervariasi, walau beberapa browser yang sering dipakai sudah mendukung fitur ini tanpa memerlukan prefix untuk tiap vendor browser. Untuk browser Chrome sudah mendukung multiple background sejak versi 10 ke atas, Firefox sejak versi 3.6, Safari sejak versi 1.3, Opera sejak versi 10.50, dan IE sejak versi 9.0.

Pada penggunaan multiple background yang kompleks bisa menyebabkan browser yang belum mendukung fitur ini tidak akan menampilkan latar belakang sama sekali. Tentunya, kekurangan tersebut tidak benar-benar membuat teknik ini tidak layak pakai. Untuk mengatasi hal tersebut gunakanlah Modernizr yang diklaim sebagai salah satu solusi terbaik yang ada pada saat artikel ini ditulis. Selamat mencoba!

Tag: , , ,

9 Comments

Leave Comment
  1. Mustofa says:

    wah aku masih bingung nih, penentuan image layer atas atau layer bawah gimana?

  2. Wirtoyo says:

    Bos…, kalo saya mau membuat multi backgounnd image, ada 2 gambar, san satu gambar saya mauu letakan di pojok kanan bawah tapi bersifat statis… sintaknya gimana yah…., mohon pencerahanya…

    • Aku nangkepnya ada background gambar A.jpg dan B.png dengan spesifikasi seperti berikut:
      A. gambar yang dijadikan pattern dan background dasar.
      B. gambar yang bersifat statis di pojok kanan bawah

      kode CSS-nya
      .elemen{background: url(img/B.png) no-repeat right bottom, url(img/A.jpg)}

      CMIIW, semoga membantu :)

  3. Adi Nugraha says:

    Makasih ya udah share ilmunya.

Write Comment

Your email will not be published. The marked label is required.