diff --git a/theme/layouts/center.vue b/theme/layouts/center.vue
index 9eab593..916556d 100644
--- a/theme/layouts/center.vue
+++ b/theme/layouts/center.vue
@@ -9,9 +9,13 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <template>
diff --git a/theme/layouts/cols.vue b/theme/layouts/cols.vue
index ced1798..db1b445 100644
--- a/theme/layouts/cols.vue
+++ b/theme/layouts/cols.vue
@@ -10,6 +10,10 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
   cols: {
     type: Number,
     default: undefined,
@@ -21,7 +25,7 @@ const props = defineProps({
   }
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 
 const colIds = computed(() => {
   const colIds: string[] = []
diff --git a/theme/layouts/cover.vue b/theme/layouts/cover.vue
index 5d217d7..8a02127 100644
--- a/theme/layouts/cover.vue
+++ b/theme/layouts/cover.vue
@@ -9,9 +9,13 @@ const props = defineProps({
     // random image from a curated Unsplash collection by Anthony
     default: 'https://source.unsplash.com/collection/94734566/1920x1080',
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <template>
diff --git a/theme/layouts/default.vue b/theme/layouts/default.vue
index 32acdd9..435059d 100644
--- a/theme/layouts/default.vue
+++ b/theme/layouts/default.vue
@@ -9,9 +9,13 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <template>
diff --git a/theme/layouts/fact.vue b/theme/layouts/fact.vue
index a393906..f2b637c 100644
--- a/theme/layouts/fact.vue
+++ b/theme/layouts/fact.vue
@@ -9,9 +9,13 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <template>
diff --git a/theme/layouts/full.vue b/theme/layouts/full.vue
index bb5ff0f..1873d54 100644
--- a/theme/layouts/full.vue
+++ b/theme/layouts/full.vue
@@ -9,9 +9,13 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <template>
diff --git a/theme/layouts/fullpage.vue b/theme/layouts/fullpage.vue
index ecdfab0..709003c 100644
--- a/theme/layouts/fullpage.vue
+++ b/theme/layouts/fullpage.vue
@@ -11,7 +11,7 @@ const props = defineProps({
   },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <style>
diff --git a/theme/layouts/intro.vue b/theme/layouts/intro.vue
index cb2ccb0..edf71c5 100644
--- a/theme/layouts/intro.vue
+++ b/theme/layouts/intro.vue
@@ -9,9 +9,13 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <template>
diff --git a/theme/layouts/quote.vue b/theme/layouts/quote.vue
index eceeb94..b518397 100644
--- a/theme/layouts/quote.vue
+++ b/theme/layouts/quote.vue
@@ -9,9 +9,13 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <template>
diff --git a/theme/layouts/section.vue b/theme/layouts/section.vue
index b2a3129..71ae91f 100644
--- a/theme/layouts/section.vue
+++ b/theme/layouts/section.vue
@@ -9,9 +9,13 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <template>
diff --git a/theme/layouts/statement.vue b/theme/layouts/statement.vue
index 65e1ecc..0fcb9cc 100644
--- a/theme/layouts/statement.vue
+++ b/theme/layouts/statement.vue
@@ -9,9 +9,13 @@ const props = defineProps({
     type: String,
     default: undefined,
   },
+  dim: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const style = computed(() => handleBackground(props.background, true))
+const style = computed(() => handleBackground(props.background, props.dim))
 </script>
 
 <template>