diff --git a/src/components/common/Layout.js b/src/components/common/Layout.js
index 6218a8625..c2f8d5d83 100644
--- a/src/components/common/Layout.js
+++ b/src/components/common/Layout.js
@@ -35,7 +35,7 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
 
             <div className="viewport-top">
                 {/* The main header section on top of the screen */}
-                <header className="site-head">
+                <header className="site-head" style={{ ...site.cover_image && { backgroundImage: `url(${site.cover_image})` } }}>
                     <div className="container">
                         <div className="site-mast">
                             <div className="site-mast-left">
diff --git a/src/styles/app.css b/src/styles/app.css
index 5b28c10ca..c0fe26238 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -666,6 +666,8 @@ h6 {
     padding-bottom: 20px;
     color: #fff;
     background: var(--color-base);
+    background-position: center;
+    background-size: cover;
 }
 
 .site-nav-item {
@@ -698,7 +700,6 @@ h6 {
 .site-mast-right {
     display: flex;
     align-items: center;
-    margin: 0 -10px 0 20px;
 }
 
 .site-mast-right .site-nav-item:last-child {
@@ -739,10 +740,6 @@ h6 {
     margin: 0 20px 0 -10px;
 }
 
-.site-nav-right {
-    margin: 0 -10px 0 20px;
-}
-
 .site-nav-button {
     display: inline-block;
     padding: 5px 10px;