diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index 13d804f68..741fc4581 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -10,6 +10,7 @@
 .header {
   height: variables.$header-height;
   padding: 10px variables.$base-spacing * 4;
+  background: var(--header-background);
 
   //
   // Make header fixed
diff --git a/src/providers/ConfigProvider.tsx b/src/providers/ConfigProvider.tsx
index 85432a79c..f94b377b5 100644
--- a/src/providers/ConfigProvider.tsx
+++ b/src/providers/ConfigProvider.tsx
@@ -58,7 +58,7 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
     loadAndValidateConfig(configLocation);
   }, [configLocation, onLoading, onValidationError]);
 
-  const setCssVariables = ({ backgroundColor, highlightColor }: Options) => {
+  const setCssVariables = ({ backgroundColor, highlightColor, headerBackground }: Options) => {
     const root = document.querySelector(':root') as HTMLElement;
 
     if (root && backgroundColor) {
@@ -68,6 +68,9 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
     if (root && highlightColor) {
       root.style.setProperty('--highlight-color', highlightColor);
     }
+    if (root && headerBackground) {
+      root.style.setProperty('--header-background', headerBackground);
+    }
   };
 
   return (