How to blur background image of div, without blurring the remaining site or the content of the div

Question

I\'m trying to figure out how to blur the background image of a div. The goal is to only blur the background image of the div and not the background of the page itself or th

Answer 1

Here is the solution

  

  

    

      

        

          
Grayscale
          
A free, responsive, one page Bootstrap theme.
            
Created by Start Bootstrap.
          
            
          
        
      
    
  

Css :

body {
    width: 100%;
    height: 100%;
    font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    background-color: black;
    margin: 0;
    padding: 0;
}

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: white;
}

.intro .background-image {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.intro .intro-body {
  z-index: 9999;
  display: table-cell;
  vertical-align: middle;
}