diff --git a/exampleSite/content/iceland.jpg b/exampleSite/assets/img/iceland.jpg
similarity index 100%
rename from exampleSite/content/iceland.jpg
rename to exampleSite/assets/img/iceland.jpg
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 6c8959f8..1aec57d3 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -23,7 +23,7 @@ mainSections = ["docs"]
 
 [homepage]
   layout = "custom" # valid options: page, profile, hero, card, background, custom
-  homepageImage = "iceland.jpg" # used in: hero, and card
+  homepageImage = "/img/iceland.jpg" # used in: hero, and card
   showRecent = true
   showRecentItems = 5
   showMoreLink = true
diff --git a/layouts/partials/home/background.html b/layouts/partials/home/background.html
index db5d6604..c095f84f 100644
--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -4,13 +4,18 @@
         <div class="mx-auto max-w-7xl p-0">
             <div class="relative sm:overflow-hidden">
                 <div class="absolute inset-0">
-                    <img class="h-full w-full object-cover m-0 nozoom" src="{{ .Site.Params.homepage.homepageImage }}">
+                    {{ with .Site.Params.homepage.homepageImage }}
+                    {{ $homepageImage := resources.Get . }}
+                    {{ if $homepageImage }}
+                    <img class="h-full w-full object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}">
                     <div
                         class="absolute inset-0 bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent dark:to-neutral-300  mix-blend-normal dark:mix-blend-multiply">
                     </div>
                     <div
                         class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
                     </div>
+                    {{ end }}
+                    {{ end }}
                 </div>
                 <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8 flex flex-col items-center">
                     {{ with .Site.Author.image }}
diff --git a/layouts/partials/home/card.html b/layouts/partials/home/card.html
index 4fb1bb5d..3804450d 100644
--- a/layouts/partials/home/card.html
+++ b/layouts/partials/home/card.html
@@ -14,8 +14,13 @@
             </div>
             <div class="mt-6 sm:mt-16 lg:mt-0">
                 <div class="-mr-48 pl-4 sm:pl-6 md:-mr-16 lg:relative lg:m-0 lg:h-full lg:px-0">
+                    {{ with .Site.Params.homepage.homepageImage }}
+                    {{ $homepageImage := resources.Get . }}
+                    {{ if $homepageImage }}
                     <img class="w-full rounded-xl shadow-xl lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
-                        src="{{ .Site.Params.homepage.homepageImage }}">
+                        src="{{ $homepageImage.RelPermalink }}">
+                    {{ end }}
+                    {{ end }}
                 </div>
             </div>
         </div>
diff --git a/layouts/partials/home/hero.html b/layouts/partials/home/hero.html
index 28d82276..a6b824f8 100644
--- a/layouts/partials/home/hero.html
+++ b/layouts/partials/home/hero.html
@@ -4,10 +4,15 @@
         <div class="mx-auto max-w-7xl p-0">
             <div class="relative shadow-xl sm:overflow-hidden rounded-2xl">
                 <div class="absolute inset-0">
-                    <img class="h-full w-full object-cover m-0 nozoom" src="{{ .Site.Params.homepage.homepageImage }}">
+                    {{ with .Site.Params.homepage.homepageImage }}
+                    {{ $homepageImage := resources.Get . }}
+                    {{ if $homepageImage }}
+                    <img class="h-full w-full object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}">
                     <div
                         class="absolute inset-0 bg-gradient-to-r from-primary-500 to-secondary-700 dark:from-primary-600 dark:to-secondary-800 mix-blend-multiply">
                     </div>
+                    {{ end }}
+                    {{ end }}
                 </div>
                 <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8 flex flex-col items-center">
                     {{ with .Site.Author.image }}