diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 49499c2..d0d966e 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -66,7 +66,12 @@ function genHeading(str) {
 				))}
 			</div>
 		</div>
-		<div class="w-full z-10" class:list={[banner ? "h-[600px]" : "pb-6"]} id={banner ? "intro" : "no-intro"}>
+		<div class="w-full z-10 relative" class:list={[typeof banner === 'object' ? 'aspect-video' : (banner ? "h-[600px]" : "pb-6")]} id={banner === "true" ? "intro" : "no-intro"}>
+			{typeof banner === 'object' &&
+				<div class="absolute w-full aspect-video -z-10">
+					<div class="w-full h-full" style={`background-image: url(${banner.img}); background-size: 100% 100%; background-position: 0rem 0rem;`}></div>
+				</div>
+			}
 			<header class="flex pt-6 middle-pane-big">
 				<div class="mr-4 lg:hidden">
 					<div class="hamburger"></div>
@@ -90,7 +95,7 @@ function genHeading(str) {
 					))}
 				</div>
 			</header>
-			{banner &&
+			{banner && typeof banner !== 'object' &&
 				<div class="w-full h-full flex mt-20 sm:mt-32 middle-pane-medium">
 					<div>
 						<div class="w3pn-logo w-64 sm:w-72 lg:w-80 xl:w-96"></div>
diff --git a/src/pages/event/[id].astro b/src/pages/event/[id].astro
index 2c2e923..8813177 100644
--- a/src/pages/event/[id].astro
+++ b/src/pages/event/[id].astro
@@ -17,10 +17,12 @@ const item = core.events.find(event => event.id === id)
 const status = eventStatus(item)
 const ext = findExt(EventsExt, item)
 const eventPoster = getEventPoster(item)
+const eventHeader = item.images?.wide
+const banner = eventHeader ? { img: eventHeader } : false
 
 ---
 
-<BaseLayout title={id} metaTitle={nameRenderer(item, true)} image="og_events">
+<BaseLayout {banner} title={id} metaTitle={nameRenderer(item, true)} image="og_events">
 
 	<div class="middle-pane-medium mt-10">