adding overlay class/placeholder and adding to header

opentech/static_src/src/sass/base/_base.scss

@@ -83,3 +83,15 @@ ol {
 %is-unhidden {
     display: block;
 }
+
+.overlay,
+%overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 5;
+    width: 100%;
+    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.72) 0%, rgba(116, 116, 118, 0) 96%);
+    content: '';
+    opacity: 0.3;
+}

opentech/static_src/src/sass/layout/_header.scss

@@ -4,6 +4,11 @@
     padding: 10px;
     background-color: $color--primary;
 
+    &::before {
+        @extend %overlay;
+        height: 300px;
+    }
+
     @include media-query(tablet-portrait) {
         height: 410px;
         padding: 20px;