In this tutorial we will show you the solution of CSS blur background behind div, as we know css used to style html elements, here we used css internal method to create blur effect on background image using <div> element.
Using blur effect we can display texts on dark color background so user can see texts clearly and also we can blur image directly but here we will see about create to cover particular area of background using <div> element.
Step By Step Guide On CSS Blur Background Behind DIV :-
Here we used internal style method and in our program we sets background image using ‘background-image’ property to body element to cover screen size and defined one <div> tag with class attribute ‘b’ because we used that class to define style <div> element.
In <div> element we defined to align center of background with size ‘width-80%, height-30rem’ and using ‘backdrop-filter’ property with blur value we blurred background image for particular size.
<!DOCTYPE html>
<html>
<head>
<title>BLUR BACKGROUND BEHIND DIV</title>
<style>
body{
background-image: url(bg.jpg);
background-size:cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.b{
display: block;
margin: auto;
backdrop-filter: blur(5px);
width: 80%;
height: 30rem;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.696);
}
</style>
</head>
<body>
<div class="b"></div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Here we defined style for body element, we sets ‘background-image’ and width and height of element size is ‘100%’ and the ‘background-size’ property value sets as ‘cover’ used to fit background image size to screen size and ‘background-repeat’ property used to avoid image repeat which is occur only when our image size is too small it will repeatedly display same image to fill element size so we have to sets to ‘no-repeat’ value.
- When we defining style used id or class of particular element we have to use respective symbols ‘.(dot)-refers class attribute’ and ‘#(hash)-refers id attribute’ before name of id or class attribute.
- In class (.b) we defined styles ‘display: block; margin: auto;’ used to align center of page, blur effect size cover 80% of width and 30rem of height, ’ box-shadow’ property used to highlight blur effect and ‘backdrop-filter’ makes blur visible.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we sets background image on body element and defined <div> tag used to display blur effect on webpage when we load on browser.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to give blur background behind div using css.
When user loads this on browser we defined body background with blur effect will display on webpage.
It is mostly used when background had dark color our banner text not clearly display on that we can use this concept to make visible texts clearly to viewers.
We can also make different effects like brightness, grayscale and saturate..,etc.
I hope this tutorial on CSS blur background behind div helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
