enterprise hero

_src/_assets/styles/_page-enterprise.scss

@@ -17,8 +17,6 @@
 }
 
 .hero--enterprise {
-    background-image: none;
-
     &,
     .section-title,
     .section-description {

_src/_assets/styles/_sections.scss

@@ -82,88 +82,6 @@
 }
 
 
-//
-// Section backgrounds
-//
-.background--blue {
-    background: $brand-main-blue;
-}
-
-.background--darker {
-    background: $gray-dark;
-}
-
-.background--light {
-    background: $brand-main-gray-lighter;
-
-    .section-title,
-    p {
-        color: $brand-main-gray;
-    }
-}
-
-.background--gray {
-    background: $brand-main-gray;
-}
-
-.background--green {
-    background: $brand-main-green;
-
-    .section-title,
-    p {
-        color: $brand-main-blue;
-    }
-
-    .section-title {
-        &:after {
-            background: darken($brand-main-green, 10%);
-        }
-    }
-
-    .feature__icon {
-        stroke: $brand-main-blue;
-        color: $brand-main-gray-lighter;
-    }
-
-    .feature__title {
-        color: $brand-main-blue;
-    }
-
-    .feature__text {
-        color: $brand-main-gray-lighter;
-    }
-}
-
-
-//
-// Photo background
-//
-.background--photo {
-    @include color-overlay;
-
-    // background
-    background: url('../img/hero-berlin.jpg') no-repeat top center;
-    background-size: cover;
-
-    .row * {
-        position: relative;
-        z-index: 5;
-    }
-
-    .section-title {
-        &::after {
-            background: rgba($brand-main-blue-light, .5);
-        }
-    }
-
-    .section-title,
-    .section-description,
-    .header__title {
-        color: #fff;
-    }
-}
-
-
 //
 // Specific sections
 //

_src/_assets/styles/bigchain/_hero.scss

@@ -7,7 +7,7 @@
 $menu-height-md: 66px;
 
 .hero {
-    @extend .background--photo;
+    @include background--photo();
     background-image: url('../img/hero-berlin.jpg');
     text-align: center;
     overflow: hidden;

_src/_assets/styles/bigchain/_mixins.scss

@@ -8,3 +8,4 @@
 @import '_mixins/buttons';
 @import '_mixins/alerts';
 @import '_mixins/color-overlay';
+@import '_mixins/backgrounds';

_src/_assets/styles/bigchain/_mixins/_backgrounds.scss

@@ -0,0 +1,84 @@
+//
+// Backgrounds
+//
+.background--blue {
+    background: $brand-main-blue;
+}
+
+.background--darker {
+    background: $gray-dark;
+}
+
+.background--light {
+    background: $brand-main-gray-lighter;
+
+    .section-title,
+    p {
+        color: $brand-main-gray;
+    }
+}
+
+.background--gray {
+    background: $brand-main-gray;
+}
+
+.background--green {
+    background: $brand-main-green;
+
+    .section-title,
+    p {
+        color: $brand-main-blue;
+    }
+
+    .section-title {
+        &:after {
+            background: darken($brand-main-green, 10%);
+        }
+    }
+
+    .feature__icon {
+        stroke: $brand-main-blue;
+        color: $brand-main-gray-lighter;
+    }
+
+    .feature__title {
+        color: $brand-main-blue;
+    }
+
+    .feature__text {
+        color: $brand-main-gray-lighter;
+    }
+}
+
+
+//
+// Photo background
+//
+@mixin background--photo() {
+    @include color-overlay;
+
+    // background
+    background: url('../img/hero-berlin.jpg') no-repeat top center;
+    background-size: cover;
+
+    .row * {
+        position: relative;
+        z-index: 5;
+    }
+
+    .section-title {
+        &::after {
+            background: rgba($brand-main-blue-light, .5);
+        }
+    }
+
+    .section-title,
+    .section-description,
+    .header__title {
+        color: #fff;
+    }
+}
+
+.background--photo {
+    @include background--photo();
+}

_src/enterprise.html

@@ -3,6 +3,7 @@ layout: base
 
 title: Enterprise
 
+image: hero-enterprise.jpg
 js: page-enterprise.min.js
 
 hero:
@@ -95,7 +96,7 @@ contact:
 
 ---
 
-<header class="hero hero--enterprise">
+<header class="hero hero--enterprise" {% if page.image %}style="background-image:url('/assets/img/{{ page.image }}')"{% endif %}>
 
     {% include menu-main.html %}