title: I want a blurred background image with overlay text
body: <p>So, I am taking the jumbotron out of the container because I want it to be full width. But when I apply text to the jumbotron it blurs it out as well. I tried doing the opposite and throwing my background image in a separate <code>&lt;div&gt;</code> but couldn't manage to make it take up the full space like I had it before. Thoughts?</p>
  
  <p><a href="http://codepen.io/mvadamski/pen/VKxAyd" rel="nofollow">My codepen project...</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%; width: 100%;
  }
  
  .navbar-nav &gt; li {
      padding: 0px 25px 0px 40px;
      margin: -15px 0px 0px 0px;
      top: -25px; right: 30px;
  }
  
  .jumbotron {
    width: 100%;
  }
  
  .jumbotron {
    background:url("http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg");
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-filter: blur(5px);
    filter: blur(5.5px);
    width: 100%;
  }
  
  p {
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;!-- NAVIGATION BAR --&gt;
    &lt;nav role="navigation" class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="navbar header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;a class="navbar-brand text-center"&gt;Michael Adamski &lt;br&gt;&lt;span class="sub-brand"&gt;- Web Developer -&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" id="navbar-list"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li a href="home" class="active"&gt;Home&lt;/li&gt;
            &lt;li a href="#about"&gt;About&lt;/li&gt;
            &lt;li a href="portfolio"&gt;Portfolio&lt;/li&gt;
            &lt;li a href="Contact"&gt;Contact&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;!-- End Navigation Bar --&gt;
  
     &lt;!-- Header --&gt;
  &lt;div class="jumbotron"&gt;
   &lt;div class="container"&gt;
      &lt;h1&gt; This is my Page! &lt;/h1&gt;
      &lt;p&gt; This is an example of what I can do with my newfound knowledge&lt;/p&gt;
    
    
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>