From 85cea60e04406bfd9776237000788bb0d96f59a3 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 3 Jun 2022 04:25:26 +0200
Subject: [PATCH] Use background to change image

---
 components/Postcard.tsx | 12 ++++++------
 styles/globals.css      |  4 +++-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/Postcard.tsx b/components/Postcard.tsx
index 0bcf41c..fa35be2 100644
--- a/components/Postcard.tsx
+++ b/components/Postcard.tsx
@@ -4,13 +4,13 @@ import { useDefinedContext } from "../utils/definedContext";
 export function Postcard() {
     const [postcard, _] = useDefinedContext(PostcardContext)
 
+    const postcardUrl = typeof postcard === "string" ? postcard : postcard.src
+
     /* eslint-disable @next/next/no-img-element */
-    return (
-        <img
+    return <>
+        <div
             className="postcard"
-            src={typeof postcard === "string" ? postcard : postcard.src}
-            alt=""
-            draggable={false}
+            style={{backgroundImage: `url(${postcardUrl})`}}
         />
-    )
+    </>
 }
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index fd3fc19..aff18bf 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -110,7 +110,9 @@ input.negative, button.negative {
 .postcard {
     width: 100vw;
     height: 100vh;
-    object-fit: cover;
+
+    background-attachment: fixed;
+    background-size: cover;
 
     position: absolute;
     z-index: -1;