CSS Multi Background 2 atau 3 Gambar Pada Satu Elemen

2 Atau 3 Bahkan Lebih Background Gambar Pada Satu Elemen - Penggunaan banyak background gambar (multi background image) dalam satu elemen merupakan salah satu desain yang bisa dipergunakan untuk memberikan tampilan yang unik, dalam hal ini merupakan alternatif menghindari penggunaan background gambar yang relatif besar ukurannya, untuk penggunaanya sendiri cukup sederhana, hanya memberikan separator (,) pada tiap background gambar.

Dengan menggunakan CSS, multi background gambar/image bisa dilakukan untuk memperindah desain tampilan terutama dalam hal ini adalah background-background pada elemen blog. Untuk penulisan css-nya sendiri sangat sederhana, seperti dibawah ini:

#multi_background {
  background: background1, background2, background3,..dst;
}

Untuk mengatur background-background tersebut kita bisa tambahkan properti background lainnya.

Sebagai contoh seperti dibawah ini:

#multi_background {
  background: url(alamat gambar1), url(alamat gambar2), url(alamat gambar3);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top left, bottom center, bottom right;
}

untuk menyingkat kode css properti bisa menjadi seperti ini:

#multi_background {
  background: url(alamat gambar1) no-repeat top left, url(alamat gambar2) no-repeat bottom center, url(alamat gambar3) no-repeat bottom right;
}

Selain properti background diatas, kita juga bisa menambahkan background peroperti lainnya seperti, background-clip, background-origin, background-size dll.

DEMO

Pada demo diatas menggunakan 4 buah background gambar, pengaturan posisi sangat penting supaya tidak terjadi tumpang tindih antar background.

perhatikan urutan background-background yang akan dipakai terutama background yang akan memenuhi seluruh elemen (penggunaan properti background-repeat) sebaiknya diletakan pada susunan terakhir multi background.

Semoga penggunaan multi background gambar ini bisa menambah indah desain tampilan blog kalian.