You must enable Javascript in your browser to run or open this site.

CSS3 Multiple Background

Kembali lagi bersama saya disini setelah sekian lama tidak berposting postingan baru. Tema kita pada pertemuan kali ini masih tetap sama yaitu CSS3. Kita akan bicara mengenai CSS3 Background yang banyak rahasia di dalamnya seperti postingan yang lalu lalu, seperti membuat Patterns dengan CSS3 Background. Dalam postingan kali ini kita akan membuktikan bahwa background bisa di lipat gandakan atau lebih dari satu.

Arti kecilnya adalah dalam suatu Box umumnya (div) memiliki satu buah background yang menyerupai gambar, dengan cara ini bisa kita di jadikan dua, tiga, empat, lima atau enam dan seterusnya bahkan sampai seribu-pun bisa jika sobat ingin.

Sebelum masuk ketahab contoh dalam postingan ini akan lebih baik jika kita melihat CSS Background Property (Properti CSS). Properti CSS ini di gunakan untuk menentukan efek Background dari suatu Element.
background-color: color code html
background-repeat: no-repeat/repeat-x/repeat-y
background-image: url/gradient
background-attactment: fixed/relatives/absolute
background-position: top/left/bottom/right/ or both
Dari keterangan CSS Property diatas itu bisa di jelaskan bahwa masing masing properti berkaitan dengan efek gambar tersebut. Berikut contoh dari pada CSS3 Multiple Background ini.

Pada Box disamping coba di perhatikan seberapa jauh sobat memperhatikan background nya. Perhatikanlah bahwa Bacground pada box di samping itu merupakan gabungan dari beberapa background lain. Di dalam Box itu terdapat 3 Jumlah gambar yang berbeda! Bisa sobat lihat disitu ada gambar Sapi, Domba dan Rumput yang sebenarnya mereka adalah gambar yang terpisah.

Browser support Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) dan Internet Explorer (9.0+). Jadi misalkan sobat tidak atau belum menggunakan Browser browser diatas, sobat belum dapat lihat kehebatan dari pada CSS3 Multiple Background ini.

KENAPA saya belum memperlihatkan kode script dari CSS3 Multiple Background yang menggambarkan Sapi, Domba, dan Rumput itu? Sebentar dulu, kode script CSS akan di tampilkan pada masing masing cara. Bagaimana cara cara tersebut sob? Ini dia!

Cara Pertama!
Jika sobat melakukan cara pertama ini, coba sobat perhatikan Background Property yang terdapat pada blockquote diatas tadi. Setelah di lihat mari kita membuat perlahan CSS3 Multiple Background ini dengan satu satu dari setiap background property tadi. Pada hasil CSS3 Multiple Background diatas yang Sapi, Domba, dan Rumput tadi bisa dihasilkan sebuat Script CSS3 seperti berikut :
  1. CSS CODE
  2. #multiple {
    width: 500px;
    height: 180px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRB9g481hTZiGHTrKrgYco5Vli0N4r8MwfE2Enr0xkCt5u7nzKMNbISCJ04eB_kGqGkejt8thgKP7QOEWLyaityZuPTMjIWpFjNXKREM48IL2lGuNNeSGWg9tYKVyNgVExgB7RXGewqw/s1600/Sheep.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDteCrUpfvLa1emiUSeeo5Lqv6fcYIzBtTUSTkNt6ceM4K95imfChlBuJxP5HRjyHZv6f42JgM9XvAbcLJRI64YHpf8OX2ah4wvXHtL4SdhmlwmMreznpFcief-sMm2e7PkaTX7XYRY0/s1600/cow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHupeARQwfGky3JUPSTctDye0JEcAmza30HlkQH6PXqYFuaBCFSTzlVkmDugkOkGAcduBqpg2S7fjbmoMtbGtI9nwTvRoDm5skrZzeaZIUFkOWHoMS4UKvwQWtc_nSOz4W_yyZajf3dDc/s1600/grass.png);
    background-position: right top, left top, center bottom;
    background-repeat: no-repeat;
    border:1px solid #fff;
    box-shadow:0 0 3px #ccc,inset 0 0 3px #eee;
    }
  3. HTML CODE
    <div id="multiple"></div>
  4. KETERANGAN
    1. Pada kode Background-image: terdapat kode 3 url yang di batasi dengan [koma]. Kode tersebut berfungsi untuk menyatukan 3 gambar dengan URL menjadi satu. Contoh gambarnya adalah kode Merah, Orange, dan Hijau dengan http itu.
    2. Pada kode background-position: terdapat 3 keterangan tempat yang di batasi dengan [koma]. Keterangan tempat itu bisa berupa top/left/bottom/right/ or both seperti yang saya udah jelaskan di blockquote paling atas itu. Tujuannya adalah mengetahui posisi dari sebuah gambar tersebut.
    3. Pada kode No-repeat artinya gambar tersebut mengulang atau tidak.
Nah artinya dengan cara pertama ini CSS3 Mutiple ini bisa di buat dengan cara terpisah satu demi satu CSS Property nya.

Cara Kedua!
Dengan cara ini sobat akan menggabungkan kode property css pada satu helai kalimat saja, yaitu background saja. Tetapi dalam arti penggabungan property tidak sembarangan digamungkan begitu saja, tetapi harus dengan berkala atau berurutan.
  1. CSS CODE
  2. #multiple {
    width: 500px;
    height: 180px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRB9g481hTZiGHTrKrgYco5Vli0N4r8MwfE2Enr0xkCt5u7nzKMNbISCJ04eB_kGqGkejt8thgKP7QOEWLyaityZuPTMjIWpFjNXKREM48IL2lGuNNeSGWg9tYKVyNgVExgB7RXGewqw/s1600/Sheep.png) right top no-repeat, url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBDteCrUpfvLa1emiUSeeo5Lqv6fcYIzBtTUSTkNt6ceM4K95imfChlBuJxP5HRjyHZv6f42JgM9XvAbcLJRI64YHpf8OX2ah4wvXHtL4SdhmlwmMreznpFcief-sMm2e7PkaTX7XYRY0/s1600/cow.png) left top no-repeat, url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHupeARQwfGky3JUPSTctDye0JEcAmza30HlkQH6PXqYFuaBCFSTzlVkmDugkOkGAcduBqpg2S7fjbmoMtbGtI9nwTvRoDm5skrZzeaZIUFkOWHoMS4UKvwQWtc_nSOz4W_yyZajf3dDc/s1600/grass.png) center bottom no-repeat;
    border:1px solid #fff;
    box-shadow:0 0 3px #ccc,inset 0 0 3px #eee;
    }
  3. HTML CODE
  4. <div id="multiple"></div>
  5. KETERANGAN
  6. Pada kode background: terlihat jelas bahwa kode property css bergabung di satu helai kalimat background itu saja dan di batasi dengan spasi dan kode.
Kesimpulannya adalah yaitu tadi pada css property bergabung dalam satu helai kalimat background itu saja.

Kuras cuman itu saja yang perlu disampaikan dalam postingan kali ini. Kalau ada kata kata yang salah atau sobat punya unek unek lain untuk meralat postingan ini, selahkan berkomentar di blog :). saya akhiri dengan Wassalam :)

123 comments

  1. kog ada foto cow sob... ???? hasil qurban kemarin yaCh ???? hha =))

    BalasHapus
  2. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  3. Mantab.....
    baru mo belajar Css3 ne,
    nemu mastahnya di blog ini,
    thanks mmas....
    izinkkan saya belajar banyak di blog ini

    BalasHapus
  4. masa contoh gambarnya sapi ris wkwkwk :D

    BalasHapus
  5. wah... ternyata banyak cara untuk mengoptimasi blog dg css ya... :)) :))

    BalasHapus
  6. yupz. tambah pengetahua lagi tentang CSS3 Multiple Background.. ini enaknya kalau sering berkunjung kesini:D

    happy blogging

    BalasHapus
  7. Mantebbb Broooo..:D
    Dapat ilmu Css3 lagi :D

    BalasHapus
  8. :(( :(( telat komeng ane :(( :((

    BalasHapus
  9. pake css emg kyk sulap ya,, hal yg biasa menjadi luar biasa,, =)) =))

    BalasHapus
  10. keren sob....jangan lupa mampir disini selalu....

    BalasHapus
  11. Amazing tuh gambarnya, siap mencoba dan hati hati di langkah pengkodean.

    Silahkan Mampir sobat.

    BalasHapus
  12. amazing sob, perlu hati-hati di pengkodean.Siap mencoba.

    BalasHapus
  13. Menggunakan pseudo elemen :before dan :after juga bisa, tapi agak susah juga mengaturnya.

    BalasHapus
  14. To Ban Terbaik di Indonesia GT Radial : silahkan nikmati pertamax :) hahaha bisa aja nih sobat :))
    To G. Gregorio : hehehe :)
    To zaenal blog : oke bro selalu ada deh untuk sobat :))
    To Cek Info : kalo bacanya judulnya doang ya gak ngerti
    To IDEAL Merek Spesialis Pisau Dapur : thanks supportnya kang

    BalasHapus
  15. To Nurahman Prakoso : maunya apaan lagi-_- :))
    To Setia Ji : iya sob sangat banyak :))
    To aku mau gratisan : oke sob thanks supportnya :)
    To Rama : hauahahhaha gak apa apa bro :) iya dari yang biasa ya jadi luar binasa :))
    To >>>ichwan HAUSGAME : thanks sob, oke :)
    To Bisnis Online Blog : thanks bangetz om supportnya :)
    To Tukang Pos : o iya kalau after sama before bisa juga tuh :D tapi lebih mudah di mengerti inian :) thanks ya

    BalasHapus
  16. css nya mas faris emang wonderful dha ... :D
    keren abiest .. ga ada duanya ... :P

    BalasHapus
  17. nice info.. sob punya ebook css ga?? share dong

    BalasHapus
  18. wihh keren banget ya backgroundnnya, kapan-kapan aku coba yah :)

    BalasHapus
  19. wah mantaf ilmunya gan, keren juga blognya... jd pengen :D ajarin dong gan
    gambar kambingnya =))

    BalasHapus
  20. Menarik nie sob,coba ane terapka di blog yach.Makasih banyak infonya,sukses selalu untukmu.
    Happy blogging.

    BalasHapus
  21. Faris nanya nih :D (mumpung maih posting ttg background)
    Misal nih ane mau bikin posting-trus dalam posting mau ane kasih kotak yang ntar isinya text/link dan ada backgroundnya???
    Gmana Faris??
    Tahu ya...? :D

    BalasHapus
  22. To Shinobi : bisa aja nih si shinobi :))
    To jobkolom : ane gak punya sob :) maap ye
    To DAW-XP : hehehehe seilahkan di cobain aja sob
    To Kerajaan Air Mata : sip
    To >>>ichwan HAUSGAME : selamat pagi juga om HAUS game :)
    To tasbih cantik : hehehe thanks banget ya supportnya :) sukses berjualan tasbihnya :)
    To Edy Sant : hahaha bisa aja sobat :)
    To Zh!nTho : hahahaha thanks sob :)
    To Er'end : o iya sob silahkan di terapkan di blog :)
    To bopfive5 : selamat siang :)
    To Wirang geni : ohhh buat semacam kotakan ya? itu pake kode DIV
    <div style="border:3px solid #000; box-shadow:0 0 3px #000,inset 0 0 5px #ccc; padding:10px;">ISI TEXT/LINK DISINI</div>

    BalasHapus
  23. Sob,,, sapinya disate pasti enak sob....

    itu kambingnya kaya shaun the sheep sob,,,, wkwkwkk

    BalasHapus
  24. di css di ada extension png,, berarti ntr bisa di ganti gambar apa aaja ya,

    BalasHapus
  25. wach,keren sob backgroundnya,,,thank's tipsnya

    BalasHapus
  26. Wiih keren nie, di bookmark dulu. :D

    BalasHapus
  27. To AbduGreen : wkwokwow ngamatin aja tuh sapi dombanya :))
    To al kahfi : iya sob kurang lebih seperti itu :D gak harus png :)
    To bunggsu : thanks ya kedatangannya :)

    BalasHapus
  28. Hebat sobb.. tutornya buat yang lagi belajar css.
    sebenarnya masih ada cara lain lagii.. buat bikin seperti itu, dengan z-index..

    BalasHapus
  29. mantap CSS3nya , tapi ane coba belum berhasil T.T , ane coba lagi ya :)

    BalasHapus
  30. wah info css lagi ya gan. kalo masalah edit-editan sih ane emang senang. tapi masalahnya blog ane ga ber background :((

    BalasHapus
  31. Keren sob css3 -nya....Bisa begitu gambarnya.memang kalau mahir bermanin CSS ini bisa bikin blog tambah keren tampilannya sob..

    BalasHapus
  32. wah bagus banget, gambar sapinya itu gemesin haha

    BalasHapus
  33. To Se Avancee : hehehe iya benar apa kata sobat :) tetapi z-index harus ada fixed;, ini juga kan khusus css3 sob :)
    To Mbah Qopet : masa sih? cobain lagi dah :)
    To blog alternativ : thanks supportnya :)
    To Fazri : huahahaha :D iya blogmu biru semua :D kasih saja background sob :)
    To cardiacku : iya sob, seperti blog tergantung yang punyanya :) blog sebagus apa pun jikalau orangnya tidak membaguskan blognya ya jadi begitu :))
    To anisayu : hahaha nggemesin kayak aku ya ;;) wkwokw

    BalasHapus
  34. keren nih backgroundnya sob, ijin save kodenya yach sob...

    BalasHapus
  35. To Asis Sugianto : thanks banget ya om supportnya kepada saya :) silahkan di save :)

    BalasHapus
  36. Jadi pengin yang seperti ini saudaraku

    BalasHapus
  37. hihi gemes sampai kesini lagi xixixi

    BalasHapus
  38. wah wah wah hampir ketinggalan informasi penting tips dan membuat CSS3 Multiple Background thnks berat udah dishare.. sori ne lagi banyak kegiatan offline

    keep blogging

    BalasHapus
  39. Pena hadir dan absen malam sob..maaf nih baru bisa absen dan hadir kembali disini...
    Tak save dulu ya sob

    BalasHapus
  40. To ibnusiwuyo : hehehe iya sob :)
    To abufarras : seperti gimana sob :)
    To anisayu : hahaha gemes ya? wahhhh aku di gemesin :Love
    To Wisata Murah : ohhhh gak apa apa sob :) thanks ya udah mampir kesini :)
    To tautanpena : tidak apa apa sob :) silahkan di save :)
    To @ Warkop Aremania : thanks juga untuk komeng dan berkunjung :)
    To autobew : heheheh thanks supportnya sob :)

    BalasHapus
  41. Tidak ada komentar selain terimakasih informasinya mas..
    Ini akan bermanfaat untuk referensi..

    BalasHapus
  42. wah, tutorialnya lengkap banget,di coba dulu gan..

    BalasHapus
  43. kode CSS3 ini sudah saya amankan sob,, terima kasih,,,

    BalasHapus
  44. Nyari camilan diblognya mas faris ahhh...8-}

    BalasHapus
  45. singgah dulu di sini ahh
    sambil belajar css3

    BalasHapus
  46. sapinya makin senyum padaku kesini lagi hihi

    BalasHapus
  47. To Nurmayanti Zain : thanks :D
    To Kopiah Putih : tak ada kata lain lagi selain sama sama :))
    To Said Arsyad : oke bro silahkan di cobain dahulu :)
    To Asis Sugianto : terimakasih juga sudah diamankan :)
    To Musa : wahhh disini tak jualan camilan bro b-( wkokwow
    To Setia Ji : silahkan duduk dan berbaring dengan tenang disini sambil ane bacakan yasin wkwokwokow =))
    To anisayu : mungkin sapinya inginkan dirimu mba :)

    BalasHapus
  48. wah, keren juga caranye...bisa dicoba nih... Terima kasih telah berkomentar di blog Laman Baca Kita :D, mau tuker link ?

    BalasHapus
  49. To Musa : hauahahaha disini jualannya CEMILAN, bukan CAMILAN :))
    To Laman Baca : thanks ya sob supportnya iya sama sama :) kalau sobat mau ya silahkan :)

    BalasHapus
  50. wahhh banyak bljr css3 dimari neh,, kalo ada wkt request tutorial 'box-shadow' donk kang,, ane msih sdkit binging

    BalasHapus
  51. wah keren2..
    harus banyak bekajar nih :D

    BalasHapus
  52. malming disini dlu bro.. soalnya ga punya pacar nih ... =))

    BalasHapus
  53. ane gx ngerti sob maksudnya, bisa dijelaskan intinya?

    BalasHapus
  54. mampir lagi , ane udah berhasil sob :)

    BalasHapus
  55. Ilmu baru lagi nih tentang model CSS...Makasih ya kawan atas berbaginya..maaf baru bisa balas kunjungannya malam ini nih

    BalasHapus
  56. Maaf sob..kelewatan tadi menjawab komentarnya jadi yang punya sobat tidak terjawab..sekarang sudah..maklum manusia kan bisa khilaf...(beladiri) hehehehe

    BalasHapus
  57. Fariss,kalau di dalam kotak ada backgroundnya?
    Kodenya ini d tambahin apa?

    BalasHapus
  58. Med padi... cari2 sarapan disini ach,,,,

    BalasHapus
  59. Ente memang master CSS mas..

    butuh banyak belajar nih aku rupanya :D

    BalasHapus
  60. To kang Topjer : kalau box shadow mudah kok gak sulit. → box-shadow:0px 0px 3px #000000, inset 0px 0px 3px #cccccc; itu contoh box shadow ada kok di google banyak banget
    To socafahreza's blog : makasih banyak ya supportnya :)
    To Shinobi Caemk : malming sama ane yuks :love wkwokwowko
    To ZONA DOWNLOAD GRATIS : gak di baca ya gak ngerti sob :) itu kan ada tuh gambar sapi, rumput sama domba. keterangannya ada juga disitu.
    To Mbah Qopet : wahhh selamat ya congrats jika sudah berasil :)

    BalasHapus
  61. To blog nailah : hehehe iya sob :) tidak apa apa :)
    To tamannya-hati : huahahaha gak apa apa sob :) ane mau cek ke TKP ah :))
    To wirang geni : tambahin aja kode background:url(URL GAMBAR); atau gak background:#kode warna;
    To musa : wahhhhh mantap om jempolnya :))
    To ABDUGREEN : siahkan cari sarapan disini :)) (ampe kiamat juga gak bakal dapat =)) )
    To @ Warkop Aremania : thanks abiez bro :P

    BalasHapus
  62. To A-NX : wahhh jangan sebut ane sebagai master bro, sama sama kok kita :)

    BalasHapus
  63. ikut meramaikan lageee ahhh =)) =)) sukses buat olimpiade nya ya sob :))

    BalasHapus
  64. To Rama : silahkan di ramaikan tempate ane :)) huahha
    To Zaenal blog : waahh thanks gan supportnya :) huhhaa

    BalasHapus
  65. Mastahh banget kau ya klo soal CSS3 gagaggagagaga kuattt

    BalasHapus
  66. wahhhh jangan pesimis begitu dong sob :)

    BalasHapus
  67. keerreenn mass...
    tapi rumit jugaa.. ane emang gak bakat di CSS3-CSS3-an.. kwaokoaw

    BalasHapus
  68. Sapinya tidak ikut korban kemarin itu saudaraku....oh ya ikutan bertukar link ya saudaraku..maaf komentarnya di sini nih...Linknya telah terpasang Di Muhasabah

    BalasHapus
  69. To Tituitbom.com : wahhhh padahal CSS paling penting dalam dunia design web :)
    To abufarras : oke deh gak apa apa kok sob :) segera di pasang ke blog aku :)

    BalasHapus
  70. Pena hadir dan absen kembali sob...biat nambahin dan ngramein suasana malam hujan nih....

    BalasHapus
  71. To tautanpena : oke soh silahkan mengapsenkan diri disini :))

    BalasHapus
  72. kapan2 dhe privat sama kamu ajaa yaa sob, mendalami css3.. ;)

    BalasHapus
  73. comment 91th dlu sob .. :)
    sambil meramekan disini ...

    BalasHapus
  74. To dhenok habibie : wahhh privAT? 8-} wahhh gak cukup umur bro
    To shinobi cafe : oke sob silahkan di ramaikan :))
    To >>>ichwan HAUSGAME : sabar gan ntar kalau gak sabar pantatnya lebar :)) =))

    BalasHapus
  75. image background bisa di dobel dobel, keyeen.. ane jadi inget kucingku mo ane poto dulu he he
    makasih tipsnya :D

    BalasHapus
  76. Di rumah ndak ada obat batuknya sob...hehehehehe.Apotik banyak neh

    BalasHapus
  77. To Rama : wahahaha diramein aja sob :))
    To Setia Ji : ya dong ane gitu loch! =))
    To Catatan Ngeblog : hehehe sabar lebih baik :))
    To alkatro : wawww bisa ngingetin sama kucing ente ya? :)) huahah
    To cardiacku : ada tapi ane gak suka obat batuknya sob :((

    BalasHapus
  78. To Musa : wahhhh selamat ya sobat musa :D gak disangka ada ente disini :))

    BalasHapus
  79. Hadir dan absen sore lagi gan...ramein suasana farixsantips....

    BalasHapus
  80. To tautanpena : wahhh makasih ya gan udah ngeramein suasana blog ane :)
    To Obat Sakit 2011 : makasih banyak kunjungannya :)

    BalasHapus
  81. ok dweh kta ramekan sob thnks ya

    BalasHapus
  82. To Bayu : thanks lagi sob :)) haha
    To bopfive5 : silahkan di ramekan :)

    BalasHapus
  83. udah tak baca sob, itu maksudnya gambarnya menyatu?

    BalasHapus
  84. Nah...ini langsung masuk bookmark..cocok untuk blog saya yang suka pake background yang macam2 pada post...Nice share and happy blogging!

    BalasHapus
  85. To ZONA DOWNLOAD GRATIS : iya 3 background menjadi 1
    To Iskaruji : wahhhh iya sob :) hihihihi siapa tau bergna kelak :)

    BalasHapus
  86. ada ilmu baru nih...ada waktu ane coba deh...thanks banyak2..

    BalasHapus
  87. Ikutan nimbrung sob, memang blog farixsantips penuh dengan kreasi.

    BalasHapus
  88. To yudee : thanks banyak ya support dan kunjungannya :)
    To Bengkel Bangun : oke sob wahhhh makasih banyak ya :)

    BalasHapus
  89. kira2 jadi berat ga nanti blog nya?mau nyoba nih soalnya

    BalasHapus
  90. To putroe : silahkan di coba :)
    To erma : enggak berat kok sob :) trust me :) it work =))

    BalasHapus
  91. itulah kelebihan dari css3
    selamat berkreasi kawan :r

    BalasHapus
  92. To BLOGBEGO : hhehehe memang sob gokil ya CSS3 itu :)

    BalasHapus
  93. Info mantap nih sob, thanks udah share..

    BalasHapus
  94. To AYRIY ZONE : oke sob, makasih ya kunjungannya :)

    BalasHapus
  95. Berkunjung mas bro... :D
    Nice share,,
    mau nanya sekalian nih sob,, CSS codenya diatas ditaruh dimana ya..?
    Thanks...

    BalasHapus
  96. To Uzumaki Lovers : diletakan dimana saja bisa sob. HTML itu fleksible dan mudah di edit edit :)

    BalasHapus