Di bawah ini kita akan mempelajari cara membuat full page image dan half page image menggunakan CSS.
Full Page Image
Kita akan mempelajari cara membuat gambar latar yang menutupi seluruh jendela browser. Di bawah ini sudah ada tutorial yang bisa di lakukan jika ingin membuat Full Page Image.
Cara Membuat Full Height Image
Gunakan elemen container dan tambahkan gambar latar belakang ke container dengan height : 100%. Tip: Gunakan 50% untuk membuat gambar latar setengah halaman(half page image). Kemudian gunakan properti latar belakang berikut untuk memusatkan dan menskalakan gambar dengan sempurna:
Catatan: Untuk memastikan bahwa gambar menutupi seluruh layar, kita juga harus menerapkan height: 100% ke <html> dan <body> :
Full Page Image
Contoh
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body, html { height: 100%; margin: 0; } .bg { /* Gambar yang digunakan */ background-image: url("https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg"); /* Tinggi Maksimum */ height: 100%; /* Pusatkan dan skalakan gambar dengan baik */ background-position: center; background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <div class="bg"></div> <p>Judul: Kimi No Na Wa (Your Name)<br> Genre: Fantasi, Romance<br> Sutradara: Makoto Shinkai<br> Penulis: Makoto Shinkai</p> </body> </html>
Half Page Image
Contoh
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* Gambar yang digunakan */
background-image: url("https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg");
/* Tinggi Maksimum */
height: 50%;
/* Pusatkan dan skalakan gambar dengan baik */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
<p>Judul: Kimi No Na Wa (Your Name)<br>
Genre: Fantasi, Romance<br>
Sutradara: Makoto Shinkai<br>
Penulis: Makoto Shinkai</p>
</body>
</html>