diff --git a/config/_default/params.toml b/config/_default/params.toml
index fc4edcb2..09a62b7a 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -17,6 +17,7 @@ enableCodeCopy = false
 
 disableImageOptimization = false
 disableTextInHeader = false
+# backgroundImageWidth = 1200
 
 # defaultBackgroundImage = "IMAGE.jpg" # used as default for background images 
 # defaultFeaturedImage = "IMAGE.jpg" # used as default for featured images in all articles
diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md
index 7b3ce190..6ccb68a8 100644
--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@@ -176,6 +176,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `robots`                        | _Not set_    | String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.                                                                        |
 | `disableImageZoom`              | `false`      | Disables image zoom feature across all the images in the site.                                                                                                                                                                                                                                                |
 | `disableImageOptimization`      | `false`      | Disables image resize and optimization features across all the images in the site.                                                                                                                                                                                                                            |
+| `backgroundImageWidth`          | `1200`       | Width (in pixels) to scale background images to.                                                                                                                                                                                                                                                              |
 | `disableTextInHeader`           | `false`      | Disables text in header, useful for logo based headers.                                                                                                                                                                                                                                                       |
 | `defaultBackgroundImage`        | _Not set_    | Default background image for both `background` homepage layout and `background` hero style                                                                                                                                                                                                                    |
 | `defaultFeaturedImage`          | _Not set_    | Default background image for all `featured` images across articles, will be overridden by a local `featured` image.                                                                                                                                                                                           |
diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html
index 1f6e3fb3..2cf1d6ea 100644
--- a/layouts/partials/hero/background.html
+++ b/layouts/partials/hero/background.html
@@ -41,7 +41,7 @@
     style="background-image:url({{ .RelPermalink }});">
     {{ end }}
 {{ else }}
-    {{ with .Resize "1200x" }}
+    {{ with .Resize (print (default "1200" $.Site.Params.backgroundImageWidth) "x") }}
     <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
     style="background-image:url({{ .RelPermalink }});">
     {{ end }}
diff --git a/layouts/partials/hero/basic.html b/layouts/partials/hero/basic.html
index 4d01bb23..87ec4f14 100644
--- a/layouts/partials/hero/basic.html
+++ b/layouts/partials/hero/basic.html
@@ -26,7 +26,7 @@
             <div class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
         {{ end }}
     {{ else }}
-        {{ with .Resize "1200x" }}
+        {{ with .Resize (print (default "1200" $.Site.Params.backgroundImageWidth) "x") }}
             <div class="w-full h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
         {{ end }}
     {{ end }}
diff --git a/layouts/partials/hero/big.html b/layouts/partials/hero/big.html
index 4b61b833..30562f2d 100644
--- a/layouts/partials/hero/big.html
+++ b/layouts/partials/hero/big.html
@@ -48,7 +48,7 @@
         </figure>
         {{ end }}
     {{ else }}
-        {{ with .Resize "1200x" }}
+        {{ with .Resize (print (default "1200" $.Site.Params.backgroundImageWidth) "x") }}
         <figure>
             <img class="w-full rounded-lg single_hero_round nozoom" alt="{{ $alt }}" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
             {{ if $caption }}
diff --git a/layouts/partials/hero/thumbAndBackground.html b/layouts/partials/hero/thumbAndBackground.html
index 4b807ac1..bc9882c1 100644
--- a/layouts/partials/hero/thumbAndBackground.html
+++ b/layouts/partials/hero/thumbAndBackground.html
@@ -25,7 +25,7 @@
 <div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
 {{ end }}
 {{ else }}
-{{ with .Resize "1200x" }}
+{{ with .Resize (print (default "1200" $.Site.Params.backgroundImageWidth) "x") }}
 <div class="w-full rounded-md h-36 md:h-56 lg:h-72 single_hero_basic nozoom" style="background-image:url({{ .RelPermalink }});"></div>
 {{ end }}
 {{ end }}
@@ -44,7 +44,7 @@
     </div>
 </div>{{ end }}
 {{ else }}
-{{ with .Resize "1200x" }}
+{{ with .Resize (print (default "1200" $.Site.Params.backgroundImageWidth) "x") }}
 <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
     style="background-image:url({{ .RelPermalink }});">
     <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">