diff --git a/resources/assets/src/components/Viewer.scss b/resources/assets/src/components/Viewer.scss
index 4ffbaeb6..7b1f3965 100644
--- a/resources/assets/src/components/Viewer.scss
+++ b/resources/assets/src/components/Viewer.scss
@@ -1,5 +1,11 @@
 @use '../styles/breakpoints';
 
+.body {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
 .viewer {
   @include breakpoints.greater-than('lg') {
     min-height: 500px;
diff --git a/resources/assets/src/components/Viewer.tsx b/resources/assets/src/components/Viewer.tsx
index 6ffb2840..bd73725b 100644
--- a/resources/assets/src/components/Viewer.tsx
+++ b/resources/assets/src/components/Viewer.tsx
@@ -210,7 +210,7 @@ const Viewer: React.FC<Props> = props => {
           </div>
         </div>
       </div>
-      <div className="card-body" style={{ background }}>
+      <div className={`card-body ${styles.body}`} style={{ background }}>
         <div ref={containerRef} className={styles.viewer}></div>
       </div>
       <div className="card-footer">