diff --git a/i18n/translations/en.json b/i18n/translations/en.json
index ce294404f3..6de11e01b3 100644
--- a/i18n/translations/en.json
+++ b/i18n/translations/en.json
@@ -294,6 +294,9 @@
 	"field.blocks.heading.name": "Heading",
 	"field.blocks.heading.text": "Text",
 	"field.blocks.heading.placeholder": "Heading …",
+	"field.blocks.figure.back.plain": "White",
+	"field.blocks.figure.back.pattern.light": "Pattern (light)",
+	"field.blocks.figure.back.pattern.dark": "Pattern (dark)",
 	"field.blocks.image.alt": "Alternative text",
 	"field.blocks.image.caption": "Caption",
 	"field.blocks.image.crop": "Crop",
diff --git a/panel/lab/components/block/3_figure/index.vue b/panel/lab/components/block/3_figure/index.vue
index 4be8a620de..6f3cec56d1 100644
--- a/panel/lab/components/block/3_figure/index.vue
+++ b/panel/lab/components/block/3_figure/index.vue
@@ -33,6 +33,17 @@
 				/>
 			</k-block-figure>
 		</k-lab-example>
+		<k-lab-example label="Back">
+			<k-block-figure
+				caption="This is a nice caption"
+				back="var(--pattern-light)"
+			>
+				<k-image-frame
+					ratio="16/9"
+					src="https://fakeimg.pl/1200x600/ff0000,0/333333,255/?text=Pattern"
+				/>
+			</k-block-figure>
+		</k-lab-example>
 		<k-lab-example label="Video">
 			<k-block-figure caption="This is a nice caption">
 				<k-frame :cover="true" ratio="16/9">
diff --git a/panel/lab/components/frames/4_color/index.vue b/panel/lab/components/frames/4_color/index.vue
index d5d73a5875..f8b6d6c8d0 100644
--- a/panel/lab/components/frames/4_color/index.vue
+++ b/panel/lab/components/frames/4_color/index.vue
@@ -25,6 +25,16 @@
 				/>
 			</k-grid>
 		</k-lab-example>
+		<k-lab-example label="Pattern">
+			<k-grid style="--columns: 3; gap: var(--spacing-6)">
+				<k-color-frame
+					v-for="ratio in ratios"
+					:key="ratio"
+					:ratio="ratio"
+					color="var(--pattern)"
+				/>
+			</k-grid>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
 
@@ -33,7 +43,7 @@ export default {
 	computed: {
 		ratios() {
 			return ["1/1", "4/3", "16/9"];
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/panel/src/components/Forms/Blocks/Block.vue b/panel/src/components/Forms/Blocks/Block.vue
index 6102e8ceea..3eeeb966e0 100644
--- a/panel/src/components/Forms/Blocks/Block.vue
+++ b/panel/src/components/Forms/Blocks/Block.vue
@@ -356,7 +356,7 @@ export default {
 <style>
 .k-block-container {
 	position: relative;
-	padding: 0.75rem;
+	padding: var(--spacing-3);
 	background: var(--color-white);
 	border-radius: var(--rounded);
 }
@@ -384,7 +384,7 @@ export default {
 	display: none;
 	position: absolute;
 	top: 0;
-	inset-inline-end: 0.75rem;
+	inset-inline-end: var(--spacing-3);
 	margin-top: calc(-1.75rem + 2px);
 }
 .k-block-container[data-last-selected="true"] > .k-block-options {
diff --git a/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue b/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue
new file mode 100644
index 0000000000..65a17ec6ce
--- /dev/null
+++ b/panel/src/components/Forms/Blocks/Elements/BlockBackgroundDropdown.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="k-block-background-dropdown">
+		<k-button
+			:dropdown="true"
+			size="xs"
+			variant="filled"
+			@click="$refs.dropdown.toggle()"
+		>
+			<k-color-frame :color="value" ratio="1/1" />
+		</k-button>
+		<k-dropdown-content
+			ref="dropdown"
+			align-x="end"
+			:options="[
+				{
+					text: $t('field.blocks.figure.back.plain'),
+					click: 'var(--color-white)'
+				},
+				{
+					text: $t('field.blocks.figure.back.pattern.light'),
+					click: 'var(--pattern-light)'
+				},
+				{
+					text: $t('field.blocks.figure.back.pattern.dark'),
+					click: 'var(--pattern)'
+				}
+			]"
+			@action="$emit('input', $event)"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		value: String
+	}
+};
+</script>
+
+<style>
+.k-block-background-dropdown > .k-button {
+	--color-frame-rounded: 0;
+	--color-frame-size: 1.5rem;
+	--button-height: 1.5rem;
+	--button-padding: 0 0.125rem;
+	--button-color-back: var(--color-white);
+	gap: 0.25rem;
+	box-shadow: var(--shadow-toolbar);
+	border: 1px solid var(--color-white);
+}
+.k-block-background-dropdown .k-color-frame {
+	border-right: 1px solid var(--color-gray-300);
+}
+.k-block-background-dropdown .k-color-frame::after {
+	box-shadow: none;
+}
+.k-block .k-block-background-dropdown {
+	position: absolute;
+	inset-inline-end: var(--spacing-3);
+	bottom: var(--spacing-3);
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+}
+.k-block:hover .k-block-background-dropdown {
+	opacity: 1;
+}
+</style>
diff --git a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
index f199f4cc23..60ae1f31a3 100644
--- a/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
+++ b/panel/src/components/Forms/Blocks/Elements/BlockFigure.vue
@@ -1,5 +1,9 @@
 <template>
-	<figure class="k-block-figure">
+	<figure
+		:data-empty="isEmpty"
+		:style="{ '--block-figure-back': back }"
+		class="k-block-figure"
+	>
 		<k-button
 			v-if="isEmpty"
 			:disabled="disabled"
@@ -16,15 +20,14 @@
 		>
 			<slot />
 		</span>
-		<figcaption v-if="caption">
-			<k-writer
-				:disabled="disabled"
-				:inline="true"
-				:marks="captionMarks"
-				:value="caption"
-				@input="$emit('update', { caption: $event })"
-			/>
-		</figcaption>
+
+		<k-block-figure-caption
+			v-if="caption"
+			:disabled="disabled"
+			:marks="captionMarks"
+			:value="caption"
+			@input="$emit('update', { caption: $event })"
+		/>
 	</figure>
 </template>
 
@@ -32,6 +35,7 @@
 export default {
 	inheritAttrs: false,
 	props: {
+		back: String,
 		caption: String,
 		captionMarks: {
 			default: true,
@@ -47,6 +51,10 @@ export default {
 </script>
 
 <style>
+.k-block-figure:not([data-empty="true"]) {
+	--block-figure-back: var(--color-white);
+	background: var(--block-figure-back);
+}
 .k-block-figure-container:not([data-disabled="true"]) {
 	cursor: pointer;
 }
diff --git a/panel/src/components/Forms/Blocks/Elements/BlockFigureCaption.vue b/panel/src/components/Forms/Blocks/Elements/BlockFigureCaption.vue
new file mode 100644
index 0000000000..78f31d4d89
--- /dev/null
+++ b/panel/src/components/Forms/Blocks/Elements/BlockFigureCaption.vue
@@ -0,0 +1,40 @@
+<template>
+	<figcaption class="k-block-figure-caption">
+		<k-writer
+			:disabled="disabled"
+			:inline="true"
+			:marks="marks"
+			:spellcheck="false"
+			:value="value"
+			@input="$emit('input', $event)"
+		/>
+	</figcaption>
+</template>
+
+<script>
+export default {
+	props: {
+		disabled: Boolean,
+		marks: [Array, Boolean],
+		value: String
+	}
+};
+</script>
+
+<style>
+.k-block-figure-caption {
+	display: flex;
+	justify-content: center;
+	padding-top: var(--spacing-3);
+}
+.k-block-figure-caption .k-writer {
+	width: max-content;
+	text-align: center;
+}
+
+.k-block-figure-caption .k-writer .k-text {
+	color: var(--color-gray-600);
+	font-size: var(--text-sm);
+	mix-blend-mode: exclusion;
+}
+</style>
diff --git a/panel/src/components/Forms/Blocks/Types/Fields.vue b/panel/src/components/Forms/Blocks/Types/Fields.vue
index fbab57bcd8..6f17e0c007 100644
--- a/panel/src/components/Forms/Blocks/Types/Fields.vue
+++ b/panel/src/components/Forms/Blocks/Types/Fields.vue
@@ -40,7 +40,6 @@ import Block from "./Default.vue";
 export default {
 	extends: Block,
 	props: {
-		endpoints: Object,
 		tabs: Object
 	},
 	data() {
diff --git a/panel/src/components/Forms/Blocks/Types/Gallery.vue b/panel/src/components/Forms/Blocks/Types/Gallery.vue
index 12aa8c465b..a3c6517f0a 100644
--- a/panel/src/components/Forms/Blocks/Types/Gallery.vue
+++ b/panel/src/components/Forms/Blocks/Types/Gallery.vue
@@ -1,7 +1,7 @@
 <template>
-	<figure>
+	<figure :data-empty="isEmpty" :style="{ '--block-back': back }">
 		<ul @dblclick="open">
-			<template v-if="!content.images?.length">
+			<template v-if="isEmpty">
 				<li
 					v-for="index in 3"
 					:key="index"
@@ -20,17 +20,17 @@
 						:alt="image.alt"
 					/>
 				</li>
+
+				<k-block-background-dropdown :value="back" @input="onBack" />
 			</template>
 		</ul>
-		<figcaption v-if="content.caption">
-			<k-writer
-				:disabled="disabled"
-				:inline="true"
-				:marks="captionMarks"
-				:value="content.caption"
-				@input="$emit('update', { caption: $event })"
-			/>
-		</figcaption>
+		<k-block-figure-caption
+			v-if="content.caption"
+			:disabled="disabled"
+			:marks="captionMarks"
+			:value="content.caption"
+			@input="$emit('update', { caption: $event })"
+		/>
 	</figure>
 </template>
 
@@ -42,6 +42,11 @@ import Block from "./Default.vue";
  */
 export default {
 	extends: Block,
+	data() {
+		return {
+			back: this.onBack() ?? "white"
+		};
+	},
 	computed: {
 		captionMarks() {
 			return this.field("caption", { marks: true }).marks;
@@ -49,14 +54,40 @@ export default {
 		crop() {
 			return this.content.crop;
 		},
+		isEmpty() {
+			return !this.content.images?.length;
+		},
 		ratio() {
 			return this.content.ratio;
 		}
+	},
+	methods: {
+		onBack(value) {
+			const id = `kirby.galleryBlock.${this.endpoints.field}.${this.id}`;
+
+			if (value !== undefined) {
+				this.back = value;
+				sessionStorage.setItem(id, value);
+			} else {
+				return sessionStorage.getItem(id);
+			}
+		}
 	}
 };
 </script>
 
 <style>
+.k-block-container.k-block-container-type-gallery {
+	padding: 0;
+}
+.k-block-type-gallery > figure {
+	padding: var(--spacing-3);
+	border-radius: var(--rounded);
+}
+.k-block-type-gallery > figure:not([data-empty="true"]) {
+	background: var(--block-back);
+}
+
 .k-block-type-gallery ul {
 	display: grid;
 	grid-gap: 0.75rem;
@@ -68,16 +99,14 @@ export default {
 .k-block-type-gallery:not([data-disabled="true"]) ul {
 	cursor: pointer;
 }
+.k-block-type-gallery ul .k-image-frame {
+	border-radius: var(--rounded-sm);
+}
+
 .k-block-type-gallery[data-disabled="true"] .k-block-type-gallery-placeholder {
 	background: var(--color-gray-250);
 }
 .k-block-type-gallery-placeholder {
 	background: var(--color-background);
 }
-.k-block-type-gallery figcaption {
-	padding-top: 0.5rem;
-	color: var(--color-gray-600);
-	font-size: var(--text-sm);
-	text-align: center;
-}
 </style>
diff --git a/panel/src/components/Forms/Blocks/Types/Image.vue b/panel/src/components/Forms/Blocks/Types/Image.vue
index 17351e8053..6de6c1caba 100644
--- a/panel/src/components/Forms/Blocks/Types/Image.vue
+++ b/panel/src/components/Forms/Blocks/Types/Image.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-block-figure
+		:back="back"
 		:caption="content.caption"
 		:caption-marks="captionMarks"
 		:empty-text="$t('field.blocks.image.placeholder') + ' …'"
@@ -23,6 +24,8 @@
 				:src="src"
 				class="k-block-type-image-auto"
 			/>
+
+			<k-block-background-dropdown :value="back" @input="onBack" />
 		</template>
 	</k-block-figure>
 </template>
@@ -35,6 +38,11 @@ import Block from "./Default.vue";
  */
 export default {
 	extends: Block,
+	data() {
+		return {
+			back: this.onBack() ?? "white"
+		};
+	},
 	computed: {
 		captionMarks() {
 			return this.field("caption", { marks: true }).marks;
@@ -56,18 +64,51 @@ export default {
 		ratio() {
 			return this.content.ratio ?? false;
 		}
+	},
+	methods: {
+		onBack(value) {
+			const id = `kirby.imageBlock.${this.endpoints.field}.${this.id}`;
+
+			if (value !== undefined) {
+				this.back = value;
+				sessionStorage.setItem(id, value);
+			} else {
+				return sessionStorage.getItem(id);
+			}
+		}
 	}
 };
 </script>
 
 <style>
+.k-block-container.k-block-container-type-image {
+	padding: 0;
+}
+.k-block-type-image .k-block-figure {
+	padding: var(--spacing-3);
+	border-radius: var(--rounded);
+}
 .k-block-type-image .k-block-figure-container {
 	text-align: center;
 	line-height: 0;
 }
+.k-block-type-image .k-block-figure[data-empty="true"] {
+	padding: var(--spacing-3);
+}
+
 .k-block-type-image-auto {
 	max-width: 100%;
 	max-height: 30rem;
 	margin-inline: auto;
 }
+.k-block-type-image .k-background-dropdown {
+	position: absolute;
+	inset-inline-end: var(--spacing-3);
+	bottom: var(--spacing-3);
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+}
+.k-block-type-image:hover .k-background-dropdown {
+	opacity: 1;
+}
 </style>
diff --git a/panel/src/components/Forms/Blocks/index.js b/panel/src/components/Forms/Blocks/index.js
index b67ab3ccea..cdf6198c5e 100644
--- a/panel/src/components/Forms/Blocks/index.js
+++ b/panel/src/components/Forms/Blocks/index.js
@@ -8,7 +8,9 @@ import BlockPasteboard from "./BlockPasteboard.vue";
 import BlockSelector from "./BlockSelector.vue";
 
 // elements
+import BlockBackgroundDropdown from "./Elements/BlockBackgroundDropdown.vue";
 import BlockFigure from "./Elements/BlockFigure.vue";
+import BlockFigureCaption from "./Elements/BlockFigureCaption.vue";
 import BlockTitle from "./Elements/BlockTitle.vue";
 
 // types
@@ -36,7 +38,9 @@ export default {
 		app.component("k-block-selector", BlockSelector);
 
 		// elements
+		app.component("k-block-background-dropdown", BlockBackgroundDropdown);
 		app.component("k-block-figure", BlockFigure);
+		app.component("k-block-figure-caption", BlockFigureCaption);
 		app.component("k-block-title", BlockTitle);
 
 		// block types
diff --git a/panel/src/components/Layout/Frame/ColorFrame.vue b/panel/src/components/Layout/Frame/ColorFrame.vue
index 7b1c13f695..ce2d4f0b2f 100644
--- a/panel/src/components/Layout/Frame/ColorFrame.vue
+++ b/panel/src/components/Layout/Frame/ColorFrame.vue
@@ -1,5 +1,9 @@
 <template>
-	<k-frame v-bind="$props" :style="{ color: color }" class="k-color-frame">
+	<k-frame
+		v-bind="$props"
+		:style="{ '--color-frame-back': color }"
+		class="k-color-frame"
+	>
 		<slot />
 	</k-frame>
 </template>
@@ -28,6 +32,7 @@ export default {
 
 <style>
 :root {
+	--color-frame-back: none;
 	--color-frame-rounded: var(--rounded);
 	--color-frame-size: 100%;
 	--color-frame-darkness: 0%;
@@ -45,7 +50,7 @@ export default {
 	box-shadow: 0 0 0 1px inset hsla(0, 0%, var(--color-frame-darkness), 0.175);
 	position: absolute;
 	inset: 0;
-	background-color: currentColor;
+	background: var(--color-frame-back);
 	content: "";
 }
 </style>