Halo sobat jacoder, gimana kabarnya ? pasti baik kan :D kali ini saya akan menunjukkan tutorial klasik tentang bagaimana membuat suatu halaman yang background nya merupakan satu gambar. Jujur saya juga baru tau ini tutorial ini :D jadi langsung saja da di share. Sebelumnya sih uda pernah dapet tutorial serupa namun ada aja yang salahnya. Yang terakhir tutorial yang saya dapat ialah dari css-tr...

Membuat Gambar Full Pada layar

Halo sobat jacoder, gimana kabarnya ? pasti baik kan :D kali ini saya akan menunjukkan tutorial klasik tentang bagaimana membuat suatu halaman yang background nya merupakan satu gambar.

Jujur saya juga baru tau ini tutorial ini :D jadi langsung saja da di share. Sebelumnya sih uda pernah dapet tutorial serupa namun ada aja yang salahnya. Yang terakhir tutorial yang saya dapat ialah dari css-tricks.com ehh saat diimplementasikan gambarnya mala kepotong sekitar 20% yang bagian bawah.

Ni.. misal saya mau buat gambar ini sebagai background nya

 photo 33.jpg

Di css-tricks ngajarinnya gini

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Coba kita lihat hasilnya :

 photo 1-1.png

Bisa dilihat gambar background nya mala terpotong bagian bawahnya.



Trus ada juga yang nyaranin gini

<img src="images/bg.jpg" id="bg" alt="" style="position:fixed; top:0; left:0; min-width:100%; min-height:100%;">

Hasilnya tidak beda jauh dengan yang atas, malah makin banyak gambar yang terpotong.

Nah sekarang akan saya tunjukkan kode rahasia bagaimana cara membuat nya ^^"

Intinya seberapa lebar atau tinggi pun layarnya, gambar background tersebut akan ditarik secara paksa :D hingga memenuhi layar. Kejam amat ya...

Kamu cukup membuat style berikut ini

html {
  background: url(background.jpg) no-repeat  fixed;
  background-size:100% 100%;
}
  

Dan hasilnya adalah :

 photo 2-1.png

Bisa dilihat segitu gambarnya , ya segitu background nya. Ok sampai disini dulu ya tutorial singkat dari saya. Sampai ketemu lagi di tutorial berikut nya.


About Author

ricky orlando napitupulu

Nothing special :) Saya seorang lelaki, mahasiswa, blogger, cinta musik dan juga sedang mencoba ilmu desain grafis. Tidak banyak pengetahuan yang bisa saya bagikan, Namun saya akan sangat senang membagikan pengetahuan tersebut bila dibutuhkan :).


Comment & Discussions

  • nannung (Guest)
    bagus nii mas, jazzakumulloh ya...

  • Tobirama (Guest)
    Artikelnya bagus, dan sangat bermanfaat..

  • Please LOGIN before if you want to give the comment.