diff --git a/src/_layouts/page.html b/src/_layouts/page.html
index ce334d8..ce46a2a 100644
--- a/src/_layouts/page.html
+++ b/src/_layouts/page.html
@@ -7,7 +7,12 @@
 
     <!-- Main -->
     <article id="main">
-        <header{% if page.image %} style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"{% endif %}>
+        <header>
+            {% if page.image %}
+            <div
+                class="header-image"
+                style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"></div>
+            {% endif %}
             <h2>{{ page.title }}</h2>
             <p>{{ page.description }}</p>
         </header>
diff --git a/src/_layouts/post.html b/src/_layouts/post.html
index aeac4ea..c7f856c 100644
--- a/src/_layouts/post.html
+++ b/src/_layouts/post.html
@@ -14,7 +14,12 @@
 
     <!-- Main -->
     <article id="main">
-        <header{% if page.image %} style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"{% endif %}>
+        <header>
+            {% if page.image %}
+            <div
+                class="header-image"
+                style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"></div>
+            {% endif %}
             <h2>{{ page.title }}</h2>
             <p>{{ page.description }}</p>
         </header>
diff --git a/src/_layouts/spotlight.html b/src/_layouts/spotlight.html
index 0324b6b..bb2e3cb 100644
--- a/src/_layouts/spotlight.html
+++ b/src/_layouts/spotlight.html
@@ -6,7 +6,12 @@
     {% include header.html %}
 
     <div id="main">
-        <header{% if page.image %} style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"{% endif %}>
+        <header>
+            {% if page.image %} 
+            <div 
+                class="header-image"
+                style="background-image: url('{% if site.featured-image-source %}{{ page.image | prepend: site.featured-image-source | absolute_url }}{% else %}{{ "" | absolute_url }}/assets/images/{{ page.image }}{% endif %}');"></div>
+            {% endif %}
             <h2>{{ page.title }}</h2>
             <p>{{ page.description }}</p>
         </header>
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index ec8f5ad..865e9be 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -50,12 +50,32 @@
   > header {
     @include padding(12em, 0);
     @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
+    position: relative;
     background-attachment: fixed;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     text-align: center;
 
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    .header-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-attachment: fixed;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      z-index: 0;
+      filter: blur(3px) brightness(40%);
+    }
+
     h2 {
       font-size: 1.75em;
       margin: 0 0 (_size(element-margin) * 0.25) 0;