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

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 the div contents.

Here is an example div:

<header class="intro">
  <div class="background-image"></div>
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1 class="brand-heading">Grayscale</h1>
          <p class="intro-text">A free, responsive, one page Bootstrap theme.
            <br>Created by Start Bootstrap.</p>
          <a href="#about" class="btn btn-circle page-scroll">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

The CSS:

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

.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: auto;
  background-image: url(https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg) no-repeat bottom center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

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

Here is the JS fiddle containing the CSS I've tried: http://jsfiddle.net/80jzdvqp/

I would high appreciate some help!

Solution

Here is the solution

<body><header class="intro">
  <div class="background-image"></div>
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1 class="brand-heading">Grayscale</h1>
          <p class="intro-text">A free, responsive, one page Bootstrap theme.
            <br>Created by Start Bootstrap.</p>
          <a href="#about" class="btn btn-circle page-scroll">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
</body>

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;
}