Underground404 Sharing

Catatan & Dokumentasi.

CSS 2 Multi Backgrounds Image (2 Gambar atau Lebih)

Alhamdulillah. Bismillah. Underground404 - CSS 2 Multi Background Image (2 Gambar atau Lebih). Oke hari ini tanggal 20 Juni 2012 bertepatan hari yang sangat menyedihkan bagi saya, Karena kalah tarik tambang ckck. Ohh iya kali ini cuman share css 2 saja tentang background gambar atau latar gambar yang berganda. Maksudnya, dalam suatu content bisa terdapat 2 atau lebih gambar di satu background. Master-master musti sudah tau semua. Saya share buat yang masih belum tahu saja :).
Itu gambarnya kelupaan belum dikasih penjelasan ckck. Yaudah wes, kalau masih penasaran ada 2 background. Scroll-kan halaman ini sampai kebawah, dan lihat. Coba klik kanan disalah satu background, klik View Background Image.
Cara membuatnya cukup dan sangat mudah :
background-image:
  url('URL_IMG1'),
  url('URL_IMG2'),
  url('URL_IMG3'),
  url('URL_IMG4');
background-position:
  Posisi_URL_IMG1,
  Posisi_URL_IMG2,
  Posisi_URL_IMG3,
  Posisi_URL_IMG4;
Mm, seperti itu kerangkanya. Ohh iya, posisinya backgroundnya bisa diatur terserah agan, contohnya :
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
Tau artinya kan? semustinya tau donk :D. Ohh iya kalau kurang jelas kesini saja sudah langsung ada demonstrasinya [Link].
Dan kalau mau menambah property lainnya seperti background-repeat dan background-size, bisa seperti kerangka diatas Contoh :
background-repeat:
  repeat_URL_IMG1,
  repeat_URL_IMG2,
  repeat_URL_IMG3,
  repeat_URL_IMG4;
Ohh iya, valuenya hanya ada 4 setau saya :
  • left top
  • repeat
  • no-repeat
  • repeat-x
  • repeat-y
Mmm, kalau background-size seperti kerangka diatas hanya saja kata repeat diganti dengan size dan valuenya pun jg berbeda lebih jelasnya ada disini [Link].
Semoga bermanfaat. Kalau suka artikelnya jangan lupa like fanspagenya :). Thankyu sebelumnya. Alhamdulillah.
refrensi : [Link]