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
