CARA MEMBUAT MULTIPLE BACKGROUND
CARA MEMBUAT MULTIPLE BACKGROUND – Bagaimana cara memasang multiple background menggunakan beberapa gambar background secara bersamaan dalam satu page atau div sekaligus? Penasaran ikuti aja tutorial dibawah ini. Background merupakan hal yang sudah biasa dipasang pada halaman blog yang berfungsi untuk mempercantik tampilan dari blog tersebut.
 |
| Multiple Background |
Background ini bisa berupa latar belakang polos saja satu warna, juga bisa menggunakan gambar tertentu seperti foto, gambar pemandangan alam, pola khusus dan masih banyak lagi. Pemilihan jenis background ini bisa tergantung selera dari pemilik blog itu sendiri dan tentunya jika ingin tampilannya lebih menarik background harus matching dengan element div class yang lainnya.
CARA MEMASANG GAMBAR BACKGROUND
Untuk cara memasang background yang sederhana bisa langsung menggunakan kode css
body {
background: warna-background;
}
Dalam kode css itu juga bisa ditambahkan gambar latar belakang atau background image dengan menambahkan url dari gambar tersebut seperti ini
body {
background: url(http://URL-BACKGROUND);
}
Kamu juga bisa mengkombinasikan kedua kode css diatas apabila memang gambar background tersebut menggunakan gambar yang transparant berformat .png atau .gif seperti ini
body {
background: warna-latar url(http://URL-BACKGROUND);
}
ada juga variasi lain dalam penulisan kode css background ini bisa dilihat dalam kode
body {
background-color: warna-latar;
background-image: url(http://URL-BACKGROUND);
}
Apabila kamu memasang background yang sifatnya berpola, sebaiknya menggunakan tambahan kode pengulangan background dengan menggunakan repeat berikut ini cara aplikasinya:
1. no-repeat berarti background image tidak diulang dan hanya akan muncul satu gambar saja
2. repeat-x : pengulangan background searah sumbu x atau kesamping (horisontal)
3. repeat-y : pengulangan background searah sumbu y atau kebawah (vertikal)
Berikut ini contoh kode css dengan aplikasi repeat:
body {
background: warna-latar url(http://URL-BACKGROUND) repeat-x;
}
CARA MEMASANG MULTIPLE BACKGROUND
Kamu bisa juga memasang beberapa gambar background sekaligus dengan menggunakan kode css diatas berikut ini kodenya
body {
background: url(http://URL-BACKGROUND-1) repeat-x,
url(http://URL-BACKGROUND-2) repeat-y,
url(http://URL-BACKGROUND-n) no-repeat;
}
Berikut ini demonya :
Hasil backgound dari tutorial CARA MEMBUAT MULTIPLE BACKGROUND di atas berupa image background yang bertumpuk-tumpuk, dengan pengaturan repeat kamu bisa berkreasi lebih bebas lagi sesuai selera. Demikian semoga tutorial ini bisa bermanfaat untuk mempercantik tampilan blog kamu. Happy blogging
source : http://www.w3schools.com/css3/css3_backgrounds.asp
