Juli 30, 2021
Membuat full screen background image

Membuat full screen background image

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

Banyak sekali kita jumpai sebuah website yang menggunakan gambar sebagai tampilan dasar pada halaman websitenya.


Script ini cukup sederhana dan mudah untuk dipahami, karena hanya menggunakan html dan css saja.

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. Jangan lupa untuk menyiapkan gambar dengan dimensi yang sesuai sebagai latar belakang halaman websitenya. Gambar tersebut bisa ber-ekstensi JPG, ataupun PNG, dengan kualitas gambar yang cukup bagus.

Silahkan gunakan Realtime HTML Editor ↗ untuk melihat dan mengedit hasil dari script di atas agar tampilanya lebih baik lagi. Halaman tersebut sengaja kami sediakan sebagai sarana latihan koding html, css dan JavaScript.

Sampai disini dulu pembahasan tentang Free script kali ini, sampai jumpa di free script selanjutnya, dan salam sukses selalu buat Anda semuanya.