Memasang ≥ 2 Gambar dalam Background

Memakai satu buah gambar dalam background mungkin sudah biasa. Sekarang kita bisa memakai lebih dari satu gambar untuk dijadikan background.

Caranya sederhana, yaitu dengan menambahkan beberapa URL gambar yang dipisahkan dengan tanda koma pada elemen background-image.

background-image: url(URL_ke-1), url(URL_ke-2), ..., url(URL_ke-n);

n = jumlah gambar, banyaknya bisa berapa saja.

Penulisan pada bagian background-position dan background-repeat mengikuti urutan pada background-image. Cara penulisannya juga sama, yaitu dipisahkan dengan tanda koma (jangan lupa diakhiri tanda titik koma [;]).

Yang harus diperhatikan disini adalah urutannya. Konsepnya seperti gambar berikut.

URL_ke-1 berada di posisi paling depan, dan URL ke-n berada di posisi paling belakang. Jadi, jika kita memasang gambar yang paling besar di URL_ke-1 maka gambar di urutan berikutnya jelas tidak akan tampak karena tertutup dengan gambar besar yang disimpan di URL_ke-1.

Contohnya:

Gambar ke-1 (URL_ke-1):
Gambar ke-2 (URL_ke-2):

Kode CSS:

background-image: url(http://icons.iconarchive.com/icons/noctuline/morning-pleasure/128/Coffee-Photoshop-icon.png), url(http://everydayicons.jp/download/patterns/p21-1.jpg);
background-repeat: no-repeat, repeat;
background-position: bottom center, top left;
width: 250px;
height: 200px;

Hasilnya:

Tips:

• Urutan pemasangan besarnya gambar dari URL_ke-1 sampai URL_ke-n lebih baik dari yang paling kecil ke yang paling besar.
• Format gambar yang digunakan .png atau gambar yang transparan, terutama untuk di URL posisi awal-awal. Tujuannya agar terlihat lebih menarik saja. hehe..

Sekian penjelasan untuk memasang banyak gambar pada background atau bisa disebut 'multiple background'. Mohon maaf bila penjelasannya kurang jelas dan tidak dimengerti ^^;

Semoga bermanfaat dan selamat berkreasi! :D


Sumber gambar:

• http://everydayicons.jp/download/patterns/p21-1.jpg
• http://icons.iconarchive.com/icons/noctuline/morning-pleasure/128/Coffee-Photoshop-icon.png