Membuat full screen background image

Banyak sekali kita jumpai sebuah website menggunakan image atau gambar sebagai background halaman websitenya.

Apakah mudah membuatnya? jawabanya adalah “ya”, sangat mudah, hanya dengan HTML dan CSS saja full screen background image bisa di buat.

Scriptnya cukup sederhana dan mudah untuk dipahami, karena hanya menggunakan html dan css saja, kita lihat scriptnya dibawah.

Script full screen background image

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Membuat full screen background image</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS code -->
<style>
body, html {
  margin: 0;
  padding: 20px;
  font-family: verdana;
  color: #fff;
  text-shadow: 0 0 2px #000;
}
#bg{
  position: fixed;
  top:0;
  left:0;
  min-height: 100%;
  min-width: 400px;
  width: 100%;
  height: auto;
  z-index:-999;
}
</style>
<!-- end of CSS code -->

</head>
<body>
<img src="https://my-id.site/images/bg/rr.jpg" width="100%" id="bg">

  <h3>Membuat full screen background image</h3>
  <p>Isi halaman website anda, silahkan di kostumisasikan kembali agar lebih baik.</p>
   
</body>
</html> 

Perhatikan CSS pada line 17 dan line 32 script diatas, itulah perintah css yang menentukan penempatan image untuk fullscreen pada background.

Cukup mudah bukan, silahkan Anda ber-experimen dengan kode css di atas untuk menyesuaikan tampilanya pada website Anda.

Untuk editing dan melihat langsung hasil script diatas secara online, silahkan Anda gunakan halaman Realtime HTML Editor ↗ yang telah Saya siapkan.

Sampai disini tutorial tentang Membuat full screen background image, semoga bermanfaat, dan sampai jumpa di tutorial berikutnya.

Mungkin Anda Menyukai