Membuat Background Double dengan CSS3

Hi sobat, gak apa apa kan hanya sekedar share mengenai beberapa tutorial css ? karna saya sebenarnya kurang mengerti mengeia css, saya baru belajar, dan salah satunya adalah tutorial css membuat backround bertingkat ini, atau backround double.. sebagaimana dengan motto saya, bahwa blog ini adalah arsip saya, sebagai tempat saya belajar, jadi jika saya lupa, saya bisa cari-cari lagi arsip yang ada di blog saya ini. hehehe Ok lanjut aja tutorialnya,

Salah satu masalah terbesar dengan CSS2, adalah ketidakmampuan untuk menambahkan lebih dari satu latar belakang untuk sebuah divisi tertentu. Ketidakmampuan ini telah dipecahkan oleh CSS3! CSS3 Backgrounds dan Modul Borders sudah mendapat banyak fitur baru.

Menambahkan beberapa latar belakang dibuat sederhana dengan menggunakan gambar latar belakang peningkatan beberapa di CSS3. Seperti untuk CSS2, kita tentukan Div atas Div lain untuk mendapatkan beberapa latar belakang. Tapi dengan aturan baru dalam CSS3, kita dapat menambahkan beberapa latar belakang ke sebuah divisi tunggal dalam HTML.

Kita dapat memiliki sejumlah lapisan di CSS3. Jumlah lapisan ditentukan dengan jumlah nilai dipisahkan koma di properti Latar Belakang.

Sebagai contoh.

#Multiple
{
border: 2px solid #cccccc;
background:url(image1.gif) center, url(image2.gif) center no-repeat;
height: inherit;
width: inherit;
}

Atau kita juga bisa buat seperti code dibawah ini.

#Multiple
{
border: 2px solid #cccccc;
background-image: url(image1.gif), url(image2.gif);
background-position: center , center;
background-origin: border-box, content-box;
background-repeat: no-repeat,no-repeat;
height: inherit;
width: inherit;
}

maka kurang lebih hasilnya akan seperti gambar dibawah ini.



3 Komentar untuk "Membuat Background Double dengan CSS3"
 
Copyright © 2014 Opick Amikom - All Rights Reserved
Costum By Mataram Web