diff --git a/assets/sass/header-image.scss b/assets/sass/header-image.scss
new file mode 100644
index 0000000..b17b093
--- /dev/null
+++ b/assets/sass/header-image.scss
@@ -0,0 +1,32 @@
+{{- $featured_image := .Scratch.Get "featured_image" }}
+{{- /* Default to the full size image */ -}}
+{{- /* Trimming the slash and adding absURL make sure the image works no matter where our site lives */ -}}
+{{- $default_image_url := (trim $featured_image.RelPermalink "/") | absURL }}
+.has-header-image {
+  background-image: url('{{ $default_image_url }}');
+}
+{{ $scratch := newScratch -}}
+{{- /* If breakpoints are defined, provide a resized image for each */ -}}
+{{- $anchor := .Params.featured_image_data.anchor | default "Top" -}}
+{{- /* Default header image height is approximately 500px */ -}}
+{{- $height := 500 -}}
+{{- /* If there's a description, the header is taller */ -}}
+{{- if .Description -}}
+  {{- $height = add $height 100 -}}
+{{- end -}}
+{{- with .Site.Params.breakpoints -}}
+  {{- range $breakpoint := . -}}
+    {{- /* Default mobile breakpoint for Tachyons is 480 */ -}}
+    {{- if and (ge $breakpoint 480) (ge $featured_image.Width $breakpoint) -}}
+      {{- $breakpoint_image := $featured_image.Resize (print $breakpoint "x") -}}
+      {{- $options := print $breakpoint "x" $height " " $anchor -}}
+      {{- $breakpoint_image = $breakpoint_image.Crop ($options) -}}
+      {{- $breakpoint_image_url := (trim $breakpoint_image.RelPermalink "/") | absURL }}
+@media only screen and (max-width: {{ $breakpoint }}px) {
+  .has-header-image {
+    background-image: url('{{ $breakpoint_image_url }}');
+  }
+}
+    {{- end -}}
+  {{- end -}}
+{{- end }}
diff --git a/layouts/partials/header-image-style.html b/layouts/partials/header-image-style.html
deleted file mode 100644
index 583bf23..0000000
--- a/layouts/partials/header-image-style.html
+++ /dev/null
@@ -1,34 +0,0 @@
-{{- $featured_image := .Scratch.Get "featured_image" }}
-  <style type="text/css">
-    {{- /* Default to the full size image */ -}}
-    {{- /* Trimming the slash and adding absURL make sure the image works no matter where our site lives */ -}}
-    {{- $default_image_url := (trim $featured_image.RelPermalink "/") | absURL }}
-    .has-header-image {
-      background-image: url('{{ $default_image_url }}');
-    }
-    {{ $scratch := newScratch -}}
-    {{- /* If breakpoints are defined, provide a resized image for each */ -}}
-    {{- $anchor := .Params.featured_image_data.anchor | default "Top" -}}
-    {{- /* Default header image height is approximately 500px */ -}}
-    {{- $height := 500 -}}
-    {{- /* If there's a description, the header is taller */ -}}
-    {{- if .Description -}}
-      {{- $height = add $height 100 -}}
-    {{- end -}}
-    {{- with .Site.Params.breakpoints -}}
-      {{- range $breakpoint := . -}}
-        {{- /* Default mobile breakpoint for Tachyons is 480 */ -}}
-        {{- if and (ge $breakpoint 480) (ge $featured_image.Width $breakpoint) -}}
-          {{- $breakpoint_image := $featured_image.Resize (print $breakpoint "x") -}}
-          {{- $options := print $breakpoint "x" $height " " $anchor -}}
-          {{- $breakpoint_image = $breakpoint_image.Crop ($options) -}}
-          {{- $breakpoint_image_url := (trim $breakpoint_image.RelPermalink "/") | absURL }}
-    @media only screen and (max-width: {{ $breakpoint }}px) {
-      .has-header-image {
-        background-image: url('{{ $breakpoint_image_url }}');
-      }
-    }
-        {{- end -}}
-      {{- end -}}
-    {{- end }}
-  </style>
diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html
index ad488d7..3f71f01 100644
--- a/layouts/partials/page-header.html
+++ b/layouts/partials/page-header.html
@@ -1,7 +1,9 @@
 {{- $featured_image := partial "func/GetFeaturedImage.html" . -}}
 {{- if $featured_image -}}
   {{- .Scratch.Set "featured_image" $featured_image -}}
-  {{- partial "header-image-style.html" . }}
+  {{- $sassTemplate := resources.Get "sass/header-image.scss" -}}
+  {{- $style := $sassTemplate | resources.ExecuteAsTemplate (print ($featured_image.RelPermalink | base64Encode) "header-image.scss") . | resources.ToCSS -}}
+  <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">
   <header class="cover bg-top has-header-image">
     <div class="bg-black-60">
       {{ partial "site-navigation.html" . }}
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
index 0a5aafe..8e1bfe2 100755
--- a/layouts/partials/site-header.html
+++ b/layouts/partials/site-header.html
@@ -1,7 +1,9 @@
 {{- $featured_image := partial "func/GetFeaturedImage.html" . -}}
 {{- if $featured_image }}
   {{- .Scratch.Set "featured_image" $featured_image -}}
-  {{- partial "header-image-style.html" . }}
+  {{- $sassTemplate := resources.Get "sass/header-image.scss" -}}
+  {{- $style := $sassTemplate | resources.ExecuteAsTemplate (print ($featured_image.RelPermalink | base64Encode) "header-image.scss") . | resources.ToCSS -}}
+  <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">
   <header class="cover bg-top has-header-image">
     <div class="{{ .Site.Params.cover_dimming_class | default "bg-black-60" }}">
       {{ partial "site-navigation.html" .}}