Make a Background Image blurred & show your image
3 min readMay 27, 2022
Have you ever seen that when you scroll down a web page a section of the web page with a background image becomes blurred and another image appears on top of it? I am sure you must have seen it. Today, you will learn that effect with HTML, CSS, and javaScript. You need a simple text editor and two images( or at least one).
HTML structure
<html>
<body>
<section class='demo'>
<h1>This is just for demo</h1>
</section>
<section class="bg-img-container">
<img class='bg-no-filter'…