Css Multi Background Dalam Satu Selecktor
Bismillahirrahmanirahim.
Maksud dari post ini adalah bagaimana kita menggunakan kontent gambar lebih dari satu buah gambar sebagai background. Sistem penerapan css ini masuk kedalam CSS3.
Langsung pada pembahasan yaitu cara menggunakan dua atau lebih konten gambar sebagai background.
Sebagai contoh background yang saya gunakan pada gadget di widget sebelah kanan jika dilihat dari layar lebih dari 320px dan berada di bawah jika dilihat dari layar 320px dan yang lebih kecil.
Pada gadget tersebut saya menyisipkan tiga buah gambar sebagai background yang saya rangkai menjadi satu.
gambar-gambar tersebut antara lain:
1.
2.
3.
Ketiga gambar tersebut saya susun menjadi satu hingga membentuk background seperti ini.
Ketiga gambar tersebut saya susun menjadi satu hingga membentuk background seperti ini.
Ketiga gambar tersebut saya susun menjadi satu hingga membentuk background seperti ini.
css yang saya gunakan adalah:
Setiap gambar/background dipisahkan dengan tanda koma ( , ) dan gambar yang berada paling akhir berada pada dasar background, artinya bila kita menempati 2 atau lebih gambar pada tempat/posisi yang sama, maka gambar yang berada pada urutan paling akhir akan tertutup gambar lainnya..
Dalam css3 juga di suport dengan style background-size: untuk mengatur lebar dan tinggi background. untuk penataan background position mudah-mudahan nanti akan dibahas secara sprites dengan fungsi umum sesuai hukum yang di gunakan dalam diagram cartesius.
Maksud dari post ini adalah bagaimana kita menggunakan kontent gambar lebih dari satu buah gambar sebagai background. Sistem penerapan css ini masuk kedalam CSS3.
Langsung pada pembahasan yaitu cara menggunakan dua atau lebih konten gambar sebagai background.
Sebagai contoh background yang saya gunakan pada gadget di widget sebelah kanan jika dilihat dari layar lebih dari 320px dan berada di bawah jika dilihat dari layar 320px dan yang lebih kecil.
Pada gadget tersebut saya menyisipkan tiga buah gambar sebagai background yang saya rangkai menjadi satu.
gambar-gambar tersebut antara lain:
1.
2.
3.
Ketiga gambar tersebut saya susun menjadi satu hingga membentuk background seperti ini.
Ketiga gambar tersebut saya susun menjadi satu hingga membentuk background seperti ini.
Ketiga gambar tersebut saya susun menjadi satu hingga membentuk background seperti ini.
css yang saya gunakan adalah:
#sidewrap2 .widget
{
background:url(http://files.myopera.com/moekids2/blogger/side3.png) bottom left no-repeat,
url(http://files.myopera.com/moekids2/blogger/side1.png) top left no-repeat,
url(http://files.myopera.com/moekids2/blogger/side2.png) top left repeat-y;
}
Setiap gambar/background dipisahkan dengan tanda koma ( , ) dan gambar yang berada paling akhir berada pada dasar background, artinya bila kita menempati 2 atau lebih gambar pada tempat/posisi yang sama, maka gambar yang berada pada urutan paling akhir akan tertutup gambar lainnya..
Dalam css3 juga di suport dengan style background-size: untuk mengatur lebar dan tinggi background. untuk penataan background position mudah-mudahan nanti akan dibahas secara sprites dengan fungsi umum sesuai hukum yang di gunakan dalam diagram cartesius.
:doh: aq bingung nih, dimana letak customizernya,,,?
BalasHapusmakasih sblmnya...
untuk penataan lokasi atau letak, di setip gambar berbeda, gambar pada bagian pertama: bottom lef no-repeat; kedua: top left no-repeat; ketiga: top left repeat-y;
BalasHapusYang menutup penuh bagian adalah gambar ketiga, sedangkan gambar yang pertama dan terakhir sebagai penutup agar gambar terlihat sempurna. Dan yang penting adalah pemasangannya adalah 3 2 1, gambar 1 tertup gambar 2 dan 3, 1 dan 2 tertutup gambar 3.