Membuat Efek Blur Background Pada Website Dengan CSS

Arenapublik.com - Membuat suatu efek blur pada background website menggunakan kombinasi CSS dan HTML, cara ini sangat mudah sekali diterapkan dan sangat cocok sekali bagi kalian yang sedang mendalami front end atau tampilan dari website. Pada dasarnya kita hanya perlu fokus terhadap kode CSS, karena dari kode tersebut yang memberikan efek blur pada background. Terutama efek blur tersebut akan terlihat dengan baik jika kita menambahkan gambar sebagai efeknya.

Gambar 1 Cover Membuat Efek Blur Background

Cara Membuat Efek Blur Background

Pertama yang perlu kalian siapkan hanyalah sebuah notepad dan save as menjadi file HTML untuk meninjau langsung di browser masing-masing apakah sudah berjalan dengan baik atau tidak.

Buka notepad pada komputer kalian masing-masing, lalu buatlah sebuah kode awalan seperti <html> <head> hingga penutup kodenya masing-masing.
Lalu copy paste kode CSS di bawah ini.

body, html {

height: 100%;

margin: 0;

font-family: Arial, Helvetica, sans-serif;

}

* {

box-sizing: border-box;

}

.bg-image {

/* The image used */

background-image: url("ISI URL GAMBAR");



/* 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;

}

Sisipkan kode CSS tersebut diantara fungsi <style> code </style> karena fungsi tersebut ditujukan untuk membuat tampilan menjadi lebih keren.
Selanjutnya adalah copy paste kode untuk menampilkan tulisan pada halaman yang sudah diberikan efek blur.

<div class="bg-image"></div>
<div class="bg-text">
<h5 font-weight: bold; style="font-size:23px"> Owner Pandawa Lima</h5>
<h4 style="font-size:15px">Pembukuan Data Tebu</h4>
</div>

Pada font ukuran h5 dan h4 kalian bisa mengganti kata-katanya sesuai kebutuhan kalian masing-masing. Jangan lupa untuk menempatkan kode di atas di antara <body> code </body> karena kita ingin menampilkan tulisan di atas efek blur background nya.\
Jika sudah semua, maka tampilannya akan seperti gambar di bawah ini.

Gambar 2 Tampilan Blur Background

Baca Juga: Cara Menaikkan Skor DA Pada Blog

Note: url yang kami berikan warna merah silahkan diganti dengan url gambar kalian masing-masing ya untuk dibuat menjadi blur.

Penutup

Pada tampilan sidebar yang terdapat menu navigasi merupakan tambahan kode untuk membuat home page terlihat bagus saja, jika banyak permintaan untuk diberikan full source code maka kami akan memberikan source code full secara gratis sebagai bahan pembelajaran bersama. Ditengah pandemi seperti ini, kami dari tim arenapublik.com sangat jarang melakukan update artikel, mohon dimaklumi.

Semoga tutorial singkat dari kami tentang membuat blur background image css bisa bermanfaat bagi kalian, terimakasih.