diff --git a/cli/src/getDocusaurusConfig.ts b/cli/src/getDocusaurusConfig.ts
index 4f85e69..7a43b80 100644
--- a/cli/src/getDocusaurusConfig.ts
+++ b/cli/src/getDocusaurusConfig.ts
@@ -42,6 +42,10 @@ export default function getDocusaurusConfig({
 
     ...config.docusaurus,
 
+    customFields: {
+      bannerImage: config.home?.bannerImage
+    },
+
     themeConfig: {
       prism: {
         additionalLanguages: ["lua"],
diff --git a/cli/src/prepareProject.ts b/cli/src/prepareProject.ts
index 79d72a9..e39d41d 100644
--- a/cli/src/prepareProject.ts
+++ b/cli/src/prepareProject.ts
@@ -67,6 +67,7 @@ export type Config = Partial<{
 
   home: Partial<{
     enabled: boolean
+    bannerImage: string
     includeReadme: boolean
 
     features: {
diff --git a/cli/template/home/index.js b/cli/template/home/index.js
index efee829..44882d3 100644
--- a/cli/template/home/index.js
+++ b/cli/template/home/index.js
@@ -41,11 +41,22 @@ export function HomepageFeatures() {
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext()
+  const bannerImage = siteConfig.customFields.bannerImage
+  const hasBannerImage = bannerImage ? true : false
+  const heroBannerStyle = hasBannerImage ? { backgroundImage: `url("${bannerImage}")` } : null
+
+  const titleClassName = clsx("hero__title", {
+    [styles.titleOnBannerImage]: hasBannerImage
+  })
+  const taglineClassName = clsx("hero__subtitle", {
+    [styles.taglineOnBannerImage]: hasBannerImage
+  })
+
   return (
-    <header className={clsx("hero", styles.heroBanner)}>
+    <header className={clsx("hero", styles.heroBanner)} style={heroBannerStyle}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <h1 className={titleClassName}>{siteConfig.title}</h1>
+        <p className={taglineClassName}>{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
diff --git a/cli/template/home/index.module.css b/cli/template/home/index.module.css
index 4185a01..34c895b 100644
--- a/cli/template/home/index.module.css
+++ b/cli/template/home/index.module.css
@@ -10,6 +10,10 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
 }
 
 @media screen and (max-width: 966px) {
@@ -35,3 +39,13 @@
   height: 200px;
   width: 200px;
 }
+
+.titleOnBannerImage {
+  text-shadow: 0px 2px 4px rgb(0, 0, 0);
+  color: var(--ifm-color-gray-100);
+}
+
+.taglineOnBannerImage {
+  text-shadow: 0px 2px 4px rgb(0, 0, 0);
+  color: var(--ifm-color-gray-100);
+}
\ No newline at end of file
diff --git a/website/docs/Configuration.md b/website/docs/Configuration.md
index 3b44d18..d49d859 100644
--- a/website/docs/Configuration.md
+++ b/website/docs/Configuration.md
@@ -152,6 +152,7 @@ By default your project's README is used as the homepage. To use a custom homepa
 [home]
 enabled = true
 includeReadme = true # Optional
+bannerImage = "https://url" # Optional
 
 [[home.features]]
 title = "Feature 1"