Cara Membuat Multiple Background Dengan CSS3

Cara Membuat Multiple Background Dengan CSS3 - Teknologi pemrograman web semakin hari semakin berkembang, begitu juga dengan CSS semakin banyak teknik dan trik yang dapat di aplikasikan dengan Cascading style Sheet. Dengan adanya teknik multiple background pada CSS3 kita dapat memasukkan banyak gambar dalam satu dokumen HTML. Berikut di bawah ini adalah salah satu contoh untuk mengaplikasikan multiple background pada template blog.

• Masuk ke dasbor blog

• Kemudian pilih Tema > Edit HTML

• Cari kode dibawah ini : 

<Variable name="keycolor" description="Main Color" type="color" default="#1e87f0" value="#1e87f0"/><Variable name="body.background" description="Background" type="background" color="#f8f9fa" default="$(color) 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1IywhgqMCn0zRXUG7MSoArPJFOQgyeyuYfhcahUi9A2XumNnv6QdAtYQH6y21a9pS5_-bQhjQctMz_LlYDqKrvFpKY3TOJFIcM5CgGIkyd0RmlTGgVZLB9X9IRSmsga8OdZU7RPuY394/s0-r/bg.png) no-repeat fixed top center" value="$(color) 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1IywhgqMCn0zRXUG7MSoArPJFOQgyeyuYfhcahUi9A2XumNnv6QdAtYQH6y21a9pS5_-bQhjQctMz_LlYDqKrvFpKY3TOJFIcM5CgGIkyd0RmlTGgVZLB9X9IRSmsga8OdZU7RPuY394/s0-r/bg.png) repeat scroll top left"/>

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1IywhgqMCn0zRXUG7MSoArPJFOQgyeyuYfhcahUi9A2XumNnv6QdAtYQH6y21a9pS5_-bQhjQctMz_LlYDqKrvFpKY3TOJFIcM5CgGIkyd0RmlTGgVZLB9X9IRSmsga8OdZU7RPuY394/s0-r/bg.png) no-repeat fixed top center" value="$(color) 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1IywhgqMCn0zRXUG7MSoArPJFOQgyeyuYfhcahUi9A2XumNnv6QdAtYQH6y21a9pS5_-bQhjQctMz_LlYDqKrvFpKY3TOJFIcM5CgGIkyd0RmlTGgVZLB9X9IRSmsga8OdZU7RPuY394/s0-r/bg.png) repeat scroll top left"/>

• Kemudian ganti url yg berwarna merah dengan url gambar yang akan kalian jadikan background (Sebelumnya siapkan dulu gambar yang akan dijadikan background).

• Selanjutnya ganti teks yg berwarna biru dengan kode di bawah ini :

(....awan1.png) left top no-repeat,

(....awan2.png) right top no-repreat,

(....rumput.png) bottom center repreat-x,

(....gradien.png) top left repreat-x/>

• Gambar awan yang pertama kita posisikan pada pojok kiri atas halaman dan tidak dilakukan pengulangan.

• Pada gambar awan yang berikutnya, gambar diletakkan pada kanan atas dan pengulangan juga tida dilakukan.

• Pada gambar ketiga yaitu rumput.png diletakkan pada paling bawah halaman dan dilakukan pengulangan secara horizontal atau sesuai sumbu x.

• Bagian terakhir adalah gambar gradasi yang diletakkan mulai dari kiri atas kemudian dilakukan pengulangan sepanjang sumbu x.

Perlu di ketahui bahwa dengan teknik multiple ini, CSS seolah-olah membuat layer pada gambar yang disertakan. Jadi gambar yang paling atas adalah layer bawah atau berada di urutan lapisan gambar yang paling bawah dan gambar yang disertakan paling akhir adalah gambar yang terletak pada lapisan paling atas.