diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index 2101107f6e..7c3ab2eb21 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -226,7 +226,7 @@
         alt={$getAltText(toTimelineAsset(asset))}
         class="h-full w-full {$slideshowState === SlideshowState.None
           ? 'object-contain'
-          : slideshowLookCssMapping[$slideshowLook]}"
+          : slideshowLookCssMapping[$slideshowLook]} checkerboard"
         draggable="false"
       />
       <!-- eslint-disable-next-line svelte/require-each-key -->
@@ -259,4 +259,8 @@
     visibility: hidden;
     animation: 0s linear 0.4s forwards delayedVisibility;
   }
+  .checkerboard {
+    background-image: conic-gradient(#808080 25%, #b0b0b0 25% 50%, #808080 50% 75%, #b0b0b0 75%);
+    background-size: 20px 20px;
+  }
 </style>