Home » How To » Cara Membuat Gambar Latar Belakang Blur

Cara Membuat Gambar Latar Belakang Blur

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat gambar latar belakang buram(Blurred Background Image) dengan CSS.

Gambar Latar Belakang Buram

Catatan: Contoh ini tidak berfungsi di Edge 12, IE 11, atau versi sebelumnya.

Contoh

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* Gambar yang akan digunakan sebagai backgroud blur */
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg");
  
  /* Tambahkan filter efek blur */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Ketinggian maksimum */
  height: 100%; 
  
  /* Pusatkan dan skalakan gambar dengan baik */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Posisikan tekxt di ditengah page atau gambar */
.bg-text {
  background-color: rgb(0,0,0); /* Warna cadangan */
  background-color: rgba(0,0,0, 0.4); /* Hitam dengan opacity / tembus pandang*/
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="bg-image"></div>

<div class="bg-text">
  <h2> Contoh Blurred Background</h2>
  <h1 style="font-size:50px">Aku Gorge</h1>
  <p>Monyet yang terkenal</p>
</div>

</body>
</html>

Cara Membuat Gambar Latar Buram

Langkah 1) Tambahkan HTML:
Contoh

<div class="bg-image"></div>

<div class="bg-text">
  <h2> Contoh Blurred Background</h2>
  <h1 style="font-size:50px">Aku Gorge</h1>
  <p>Monyet yang terkenal</p>
</div>

Langkah 2) Tambahkan CSS:
Contoh

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* Gambar yang akan digunakan sebagai backgroud blur */
  background-image: url("https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg");
  
  /* Tambahkan filter efek blur */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Ketinggian maksimum */
  height: 100%; 
  
  /* Pusatkan dan skalakan gambar dengan baik */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Posisikan tekxt di ditengah page atau gambar */
.bg-text {
  background-color: rgb(0,0,0); /* Warna cadangan */
  background-color: rgba(0,0,0, 0.4); /* Hitam dengan opacity / tembus pandang*/
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

You may also like