Blurry Background Image

Blurry Background Image, pada artikel kali ini disini kita akan mencoba bagaimana membuat latar (background) pada halaman web dengan memberikan efek blur. Pastinya yang diperlukan adalah CSS.

Hasilnya akan terlihat seperti berikut:

Untuk skrip kodenya kalian bisa lihat seperti yang ada dibawah ini:

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

<div class="bg-text">
  <h2>Blurred Background</h2>
  <h1 style="font-size:50px">I am John Doe</h1>
  <p>And I'm a Photographer</p>
</div>

kalian bisa menyisipkan potongan skrip diatas pada bagian tag html body, lalu dilanjutkan dengan skrip untuk bagian cssnya, sebagai berikut:

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

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("https://source.unsplash.com/random");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  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;
}

teknik efek blur ini hanya menggunakan CSS saja, tentunya bagi yang baru mempelajari CSS tidak akan terlalu mengalami kendala.

Terima kasih semoga bermanfaat, untuk tutorial yang singkat ini. Sampai berjumpa kembali pada artikel berikutnya.