Blur an image by the CSS property
In most cases, we want to blur the background image and unblur content on that. Actually it is very simple to achieve this. To achieve this follow instructions step by step.
- To blur background you require 2 div, one for blur image and other for your content.
- Put a background image in 1st div and apply blur property.
- Now define the dimension of 2nd div and put your content with the z-index property.
- See the below example for better understanding.
HTML CODE
<div class="bg-img"></div>
<div class="bg-content">
<h1>My Name is Sandeep Singh</h1>
<p>And I'm a Teacher</p>
</div>
CSS CODE
body, html {
height: 100%;
}
* {
box-sizing: border-box;
}
/* 1st dive style for blur image */
.bg-img {
background-image: url("mybackimg.jpg");
/* blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
/* blur end*/
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 2nd dive style */
.bg-content{
background-color: rgb(0,0,0); /* background color */
background-color: rgba(0,0,0, 0.4); /* opecity to see blured image */
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;
}