Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make background blur using CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 489
    Comment on it

    Hello Reader!. If you want to show background image blur then you can use css. Lets's make a html page :-

    <div class="background-image"></div>
    <div class="content">
      <p>This is the para showing the content over the div. Behind this div the background image will be blur</p>
    
    </div>
    

    Now write the css for making the image blur:-

    .background-image {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 1;
    
      display: block;
      background-image: url('assignPathImage.jpg');
      width: 1200px;
      height: 800px;
    
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: blur(5px);
    }
    
    .content {
      position: fixed;
      left: 0;
      right: 0;
      z-index: 9999;
      margin-left: 20px;
      margin-right: 20px;
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: