In this tutorial we will show you the solution of transparent blur background CSS, as we know css used to style html elements, here we used css internal method to create transparent blur effect on background image using <div> element.
Using transparent blur effect we can see the background image also clearly on webpage and also we can blur image directly but here we will see about create to cover particular area of background with transparent blur effects using on <div> element.
Step By Step Guide On Transparent Blur Background CSS :-
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 styles on <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 with transparent background image for particular size.
<!DOCTYPE html>
<html>
<head>
<title>TRANSPARENT BLUR BACKGROUND</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(1px);
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 transparent blur effect visible the background image to viewers.
- When user gives blur value to ‘1’ it will gives transparent blur so we can see clear background if we sets blur value to ‘above than 1’ it will increase blur effects so we can’t see clear background.
- 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 transparent 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 transparent blur background behind div using css.
When user loads this on browser we defined body background with transparent blur effect will display on webpage.
It is mostly used when background and our banner text wants to see clearly on display we can use this concept to make user visible clearly.
We can also make different effects like brightness, grayscale and saturate..,etc.
I hope this tutorial on transparent blur background CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
