A Pen by Joe Watkins.

Header-w-Fixed-BG-+-CSS-blur();.markdown

Header w/Fixed BG + CSS blur();

A header w/fixed background image + CSS3 blur() added to the mix.

A Pen by Joe Watkins on CodePen.

License.

index.html

<div class="nav-bar">☰</div>

<header class="fixed-bg">
  <div class="inner-wrap"></div>
</header>

<h1>Fixed BG+blur();</h1>

<div class="container">
  <h2>Minima hic ad quam neque</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi distinctio illo quo consequuntur fugit! Dicta consequatur et libero pariatur rerum ratione molestiae veniam aperiam nam corrupti! Perferendis ipsam dolorem voluptatibus officiis non voluptas quae facilis cum delectus consequuntur ut laborum minus ratione itaque aspernatur facere accusamus reiciendis voluptatem accusantium iusto rerum eligendi quidem autem sit minima hic ad quam neque eos sequi praesentium amet nemo soluta. Molestias pariatur non quas explicabo impedit perferendis delectus nostrum debitis voluptate voluptates doloremque repellat veritatis nisi beatae quam voluptas reiciendis incidunt sit velit ut porro atque facere rem odit doloribus. Optio iusto esse quidem error qui impedit nisi placeat excepturi natus quo voluptatibus illum veniam. Nisi aut voluptas maxime accusamus et error rem quam temporibus dicta facere incidunt harum illo magni quae expedita molestiae veniam possimus iusto ab atque minima culpa assumenda. Laudantium in porro optio rem exercitationem veniam quas doloremque quod obcaecati aperiam laboriosam ducimus. Atque modi quos eos esse non necessitatibus sunt optio saepe nam harum animi illum facere quam recusandae officia quia repellat. Voluptatibus mollitia iste odit molestias provident laboriosam reprehenderit est eveniet necessitatibus reiciendis quos atque cum aut. Hic soluta repudiandae facere quos sapiente at cumque provident voluptatibus quia perspiciatis quaerat quis quasi recusandae necessitatibus modi id molestiae ex corporis quas amet dolorum pariatur voluptas! Eaque alias laudantium sapiente atque sunt obcaecati voluptates tenetur aut hic nam fugit sequi minus nesciunt quas iure possimus recusandae dolorum cumque doloribus maiores! Illum soluta officia eligendi corrupti ad doloremque asperiores. Voluptatum saepe quia non eligendi nam vel ipsa earum dolorem nisi quos soluta aperiam repellat odio ipsum impedit error expedita ipsam laboriosam sequi laudantium quaerat dignissimos animi quibusdam architecto sapiente maiores optio fuga corporis voluptatibus ducimus perspiciatis nobis veniam porro laborum dolorum blanditiis aut similique fugiat consectetur eaque illum repellendus. Rem ipsam autem nobis alias labore obcaecati amet ad fugiat voluptates non tenetur architecto harum laboriosam unde cum dicta nostrum minima! Accusamus assumenda magnam nostrum reiciendis omnis enim quasi ipsa aut ullam porro dicta beatae quis ex non eveniet. Provident optio iure asperiores culpa error quo! Fugit assumenda quam laboriosam eaque pariatur qui labore aperiam a hic similique ex cum voluptate. Commodi id minus doloremque dolorem blanditiis laboriosam dolor aspernatur cumque inventore numquam. Cumque delectus harum corrupti velit porro accusantium excepturi dolor sint doloribus atque cupiditate sit hic rerum incidunt facere assumenda eos nemo placeat alias exercitationem. Recusandae aspernatur eos ullam rerum earum veritatis odit qui similique voluptate magni. Accusamus aliquid error culpa nisi sequi a fugit veniam natus omnis eligendi voluptate velit cumque provident quia repellat harum saepe sint impedit soluta voluptatibus ipsum odio voluptas adipisci dolore eum nihil pariatur corporis quos quidem! Corporis natus officia cum qui saepe veniam enim ea porro eius eum sapiente minima quo a commodi doloribus perspiciatis hic iusto soluta sed voluptates ad earum officiis distinctio. Ea atque molestias doloribus assumenda ullam voluptates doloremque officia neque nihil laboriosam asperiores accusantium cupiditate tempore. Debitis numquam ab recusandae dolores quas aspernatur ipsam culpa atque neque quod sequi optio sed.</p>
</div>

 

script.js

// silly 
$(".inner-wrap").addClass("blur");
$("h1").css("margin-left","40px");

style.scss

@import "compass";
.nav-bar {
  background:#2C3E50;
  height:40px;
  width:100%;
  position:fixed;
  z-index:10;
  padding:10px 10px 0px 15px;
  color:#fff;
}

.fixed-bg {
  height:400px;
  width:100%;
  position:relative;
  text-align:center;
  z-index:-1;
  overflow:hidden;
  .inner-wrap {
    width:100%;
    height:400px;
    position:fixed;
    background:url('http://bit.ly/18k5KZO') 50% -650px no-repeat;
    transition:all 3s ease-in-out;
    &.blur {
      -webkit-filter: blur(10px);
      -moz-filter: blur(10px);
      -o-filter: blur(10px);
      -ms-filter: blur(10px);
      filter: blur(10px);
      opacity: 0.4;
    }
  }
}

.container {
  margin:0px auto;
  position:relative;
  background:#fff;
  padding:3em;
  min-height:1000px;
}

h1 {
    margin:-4.3em 0 1.5em .5em;
    font-family: 'Source Code Pro', sans-serif;
    font-size:4em;
    letter-spacing:-4px;
    margin-left:-4000px;
    font-family: 'Source Code Pro', sans-serif;
    color:#34495E;
    text-transform:uppercase;
    transition:all 2s ease-in-out;
}

p {
  color:#444;
  line-height:1.4em;
}