Fitur Multiple Background Pada CSS3

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.

Bagaimana Cara Menggunakannya?

kita memasukan empat buah gambar pada background -image dan mengatur posisi gambar masing - masing pada background position.

.weather {
width: 500px;
height: 280px;
margin: 50px auto;
background-image: url("images/overcast.png"),
url("images/rainbow.png"),
url("images/overcast.png"),
url("images/sunny.png");
background-position: 150px 25px,
200px 10px,
250px 25px,
100px 10px;
background-repeat: no-repeat;
}

Hasil ?

Dalam kode ini, kami telah menambahkan empat gambar yang sama dengan posisi yang berbeda, menghasilkan hasil yang menakjubkan ini.

Sumber:

http://www.emiertips.info/2013/01/cara-menggunakan-css3-untuk-multiple.html