Tutorial ini saya bagikan buat sobat yang belum bisa membuat background berupa gambar yang full dan fixed (diam) saat di scroll. Tutorial di khususkan bagi pemula yang baru saja belajar tentang html, akan tetapi bagi sobat yang sudah mahir dalam tahap ini juga boleh baca - baca sedikit dan beri saran buat saya selaku penulis artikel ini.
Saya memilih artikel ini karena banyaknya situs - situs websait yang backgroundnya di beri gambar full screnn & fixed, dan keren keren banget, maka dari itu sya mencoba untuk menulis artikel ini dan berbagi pada sobat - sobat di rumah.
Oke langsung saja ya sobat.
Hal yang harus sobat persiapkan adalah 2 file untuk mengisi index dan css-nya.
index.html
<html >
<head>
<title>belajar web</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="index.jpg" alt="gambar" id="belakang" />
<div id="isi">
Behspotku - Kali ini saya membahas tentang background image full fixed<p>
<li><i><a href="http://behspotku.blogspot.com">Saya</a></i></li>
</div>
</body>
</html>
Dimana pada tulisan bewarna merah yaitu pada tag <img> saya menggunakan id untuk pemanggilnya di css nantinya.
style.css
body {
margin: 0;
padding: 0;
text-align: center;
}
a{
color:black;
text-decoration: none;
}
a:hover{
color:white;
}
li{
list-style: none;
padding:10px;
width:30px;
border:solid 2px #f2f2f2;
}
li:hover{
background:blue;
}
#belakang{
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
float: left;
left: 0;
}
#isi{
width: 80%;
height: auto;
margin: 0 auto;
position: relative;
z-index: 5;
background:;
padding: 20px;
text-align: left;
}
Pada tag #belakang adalah pemanggil yang di buat pada index.html tadi, pada sorce kode di atas saya menggunakan width & height-nya 100%. Kenapa? karena dengan mengisikan dengan 100%, maka gambar yang kita upload akan menyesuaikan lebar brouser sobat. Sedangkan pada position saya menggunakan fixed, karena fixed akan membuat gambar tetap diam saat kita scroll.
Semoga bermanfaat bagi sobat sekalian , pada tutorial ini saya cukupkan sampai di sini dulu ya sobat..
Happy Coding :)
0 Komentar