Daminda Dinesh

Make a Background Image blurred & show your image

Dinesh Imaduwa Gamage's photo
Dinesh Imaduwa Gamage
·

4 min read

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. All You need is 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' id="bg-img" src="mountain.jpg"/>      
    </section>  
     <section id='profile'>
       <img src="gorilla.jpg">
     <p>if this is the year 3000...You may have forgotten me.<br />They considered me as endangered<br/>Few helped me; Most watched me<br/><b>Now..I am extinct. All I left for your 'kindness' is this beautiful mountains<br/>Please protect our mother...</p>
    </section>
  </body>
</html>

Adding CSS

The most important thing in this CSS is that you need to position the background image as ‘absolute’. Note, that there are two CSS classes to make the image blurred and remove the blur effect.

*{
  margin:0;
}
.demo{
  height:100vh;
  background-color:lightblue;
  text-align:center;
  margin:0;
}
.demo h1{
   position:relative;
   top:50%;
}
#bg-img{
  position:absolute;
  width: 100%;
  height:100vh;  
}
.bg-no-filter{ 
   filter: blur(0);
}
.bg-img-filter{    
   filter: blur(15px);
}
#profile{
  display: none;
  margin:0 auto;  
  width: 35%;
  border-radius:2%;
  position:relative;
  top:10em;
  padding-top:50px;
  padding-bottom:50px;
  background:rgb(66,68,68,0.5);   
  text-align:center;  
}
#profile p{ 
  color:white;
  font-size:20px;
  font-weight:600; 
  text-shadow:2px 2px #FF0000;
  font-family:Helvetica, "Trebuchet MS", Verdana, sans-serif;  
}
#profile img{
  position:relative;
  top:-12px;
  border-radius: 50%;
  width:15em;
  height:15em;   
  opacity:0.6;
 }

Handling with JavaScript

The JavaScript code runs when the scroll event of the browser is triggered. Basically what the code does is detect the pixels scrolling on Y-axis. And on a certain Y-coordinate, it applies CSS class with a filter on the background image and displays the foreground image.

As you can see here the document.body.scrollTop and document.documentElement.scrollTop is used. The scrollTop property sets or returns the number of pixels the content of an element scrolls on the Y-axis. The code works fine only with document.body.scrollTop. According to this answer on StackOverflow, however, while some browsers such as chrome and safari have scrollTop defined in element, other browsers such as firefox defines it on the element. But, when I do my experiments with this property, I did not find any concern in using document.body.scrollTop in firefox. In fact, both chrome and firefox behaved in a similar manner. Anyway, just to be on the safe side, I included both document.body.scrollTop and document.documentElement.scrollTop in my code. You can read more on the scrollTop property here.

window.onscroll = function() { effectsOnScroll();};
function effectsOnScroll() {
      //console.log(document.documentElement.scrollTop )
        //console.log( document.body.scrollTop  );
//the value can change in your screen
 if ( document.body.scrollTop > 755  || document.documentElement.scrollTop > 755 ) {                
        document.getElementById('profile').style.display = 'block';
        document.getElementById('bg-img').className = 'bg-img-filter';
  } else {
       document.getElementById('profile').style.display = 'none';
       document.getElementById('bg-img').className = 'bg-no-filter';
      }
 }

But, if you have a concern using the scrollTop property, you can replace it with the window.scrollY property, a read-only property that returns the number of pixels of the Window interface scrolling vertically, is pretty much a standard across all the browsers

window.onscroll = function() { effectsOnScroll();};
function effectsOnScroll() {
      //console.log(window.scrollY );

  if ( window.scrollY > 755  ) {    //the value can change in your screen            
        document.getElementById('profile').style.display = 'block';
        document.getElementById('bg-img').className = 'bg-img-filter';
  } else {
       document.getElementById('profile').style.display = 'none';
       document.getElementById('bg-img').className = 'bg-no-filter';
      }
 }

You can also use an event listener to do the same job

window.addEventListener("scroll", event => {
    // console.log( window.scrollY );
    if (  window.scrollY > 755 ) {   //the value can change in your screen             
        document.getElementById('profile').style.display = 'block';
        document.getElementById('bg-img').className = 'bg-img-filter';
  } else {
       document.getElementById('profile').style.display = 'none';
       document.getElementById('bg-img').className = 'bg-no-filter';
      }
});

Important Note: As you can see, in the above code snippets, I have commented on console.log statements. I did this intentionally so that you would know which value to use in the conditional statement.

depending on your set up this value could be different. For example, on a large screen monitor, it could be 755, and on a laptop, it could be 700.

Please do your experiments with this value. You can improve this code so that this value will be dynamic and will work in any screen size. I leave it as an exercise for you.

CSSJavaScriptGeneral ProgrammingWeb DevelopmentWeb Design