diff --git a/static/img/header.jpg b/static/img/header.jpg
new file mode 100644
index 0000000..4863be3
Binary files /dev/null and b/static/img/header.jpg differ
diff --git a/themes/schliesspendel/layouts/partials/head.html b/themes/schliesspendel/layouts/partials/head.html
index 6d4b548..a926aa6 100644
--- a/themes/schliesspendel/layouts/partials/head.html
+++ b/themes/schliesspendel/layouts/partials/head.html
@@ -11,7 +11,7 @@
   	<meta http-equiv="X-UA-Compatible" content="IE=edge">
   
     <link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
-  
+
     <link rel="stylesheet" href="{{ "css/bundle.css" | relURL }}">
     <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
   
@@ -20,4 +20,3 @@
     {{ partial "piwik.html" . }}
   </head>
   <body>
-    <div class="container">
diff --git a/themes/schliesspendel/layouts/partials/header.html b/themes/schliesspendel/layouts/partials/header.html
index 9a0116d..278b4cb 100644
--- a/themes/schliesspendel/layouts/partials/header.html
+++ b/themes/schliesspendel/layouts/partials/header.html
@@ -3,13 +3,15 @@
   {{ with .Site.Params.Header.button }}
   <a class="button button-primary" href="{{ .link }}">{{ .text }}</a>
   {{ end }}
-  <div class="value-props row">
-    {{ range .Site.Params.Header.feature }}
-    <div class="four columns value-prop">
-      <img class="value-img" src="{{ .image | relURL }}">
-      {{ .description | safeHTML }}
-    </div>
-    {{ end }}
-  </div>
 </section>
-
+<div class="container">
+  <section class="features">
+    <div class="value-props row">
+      {{ range .Site.Params.Header.feature }}
+      <div class="four columns value-prop">
+        <img class="value-img" src="{{ .image | relURL }}">
+        {{ .description | safeHTML }}
+      </div>
+      {{ end }}
+    </div>
+  </section>
diff --git a/themes/schliesspendel/static/css/style.css b/themes/schliesspendel/static/css/style.css
index 147eea6..27dbed8 100644
--- a/themes/schliesspendel/static/css/style.css
+++ b/themes/schliesspendel/static/css/style.css
@@ -3,17 +3,18 @@ body {
 }
 
 .header {
-  margin-top: 6rem;
+  padding-top: 6rem;
   text-align: center;
+  min-height: 200px;
 }
 
 .value-prop {
-  margin-top: 1rem; 
+  padding-top: 1rem;
 }
 
 .value-props {
-  margin-top:    4rem;
-  margin-bottom: 4rem;
+  padding-top:    4rem;
+  padding-bottom: 4rem;
 }
 
 .value-img {
@@ -56,10 +57,10 @@ footer p {
 
 @media (min-width: 550px) {
   .header {
-    margin-top: 18rem;
+    padding-top: 18rem;
+    padding-bottom: 9rem;
   }
   .value-props {
-    margin-top: 9rem;
     margin-bottom: 7rem;
   }
   .value-img {
@@ -134,3 +135,9 @@ footer p {
     width: 80%;
   }
 }
+
+/* image header */
+.header {
+  background: linear-gradient(#FFFFFF20,#FFFFFF7E), url('/img/header.jpg') center center no-repeat;
+  background-size: cover;
+}
