Monday, December 5, 2016

Cara Membuat Background Full Screen Pada Web Dengan CSS

Penulis INero Diterbitkan 12:22 AM

SCRIPT KIDDIES - Mungkin sobat yang masih newbie seperti saya ini yang belum begitu mengerti CSS dan baru tahu HTML pernah mengalami kesulitan saat mengatur background, background tersebut tidak bisa full dilayar melainkan terbagi seperti beriku

Lalu pertanyaanya bagaimana cara agar background tersebut full tidak terbagi - bagi seperti diatas ? OK akan saya share kepada sobat cara merubah ukuran background tersebut biar bisa pas dilayar. Caranya mudah kok 5 menit gak ada beres masalah ente

Berikut Tutornya :

1. Pastikan Backgroundnya besar jangan mengamil background yang berukuran kecil karena jika kita buat full screen akan menjadi pecah pecah
2.Mungkin script sobat kurang lebih seperti ini

<html>
<head>    
<title>Script Kiddies</title>
</head>
<body>
    <img src="farcry4.jpg">
</body>
</html>

3. Oke sekarang kita beri sedikit sentuhan CSS agar background bisa full screen
4. Buat seperti ini

<html>
<head>
    body{
     background: url(farcry4.jpg);
     background-size: 100%;
    }
    </style> 
 <title>Script Kiddies</title>
</head>
<body>
    
</body>
</html>

5.Akan saya terangkan. Agan ketik dibawah <head> yaitu <style> tag tersebut berguna Mendefinisikan informasi style untuk dokumen HTML dan disini kita isi dengan script CSS, gampangnya CSS berguna untuk mengatur tema,ukuran dan lain lain agar lebih simpel.
6. Hapus kode gambar yang berada di body lalu ganti dengan CSS seperti diatas. background-url ganti dengan nama gambar yang sobat inginkan
7. Tara..

Gampang bukan?? Kita tinggal meletakkan script css dengan ukuran background 100%, ukuran bisa sobat ganti sesuai keinginan sobat mau ganti 50% 20% tersweeeraahh.. ! ok sekian sedikit tutorial dari saya semoga sedikit tutor ini bermanfaat untuk sobat, Sekian Terima Kasih

Kunjungi Juga : www.tampancips.com