steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 22:54:22 +00:00
Code Activity

Use background to change image

Browse source
This commit is contained in:
Steffo 2022-06-03 04:25:26 +02:00
parent b5e1138e57
commit 85cea60e04
Signed by: steffo
GPG key ID: 6965406171929D01
2 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/Postcard.tsx
View file

@ -4,13 +4,13 @@ import { useDefinedContext } from "../utils/definedContext";
export function Postcard() { export function Postcard() {
const [postcard, _] = useDefinedContext(PostcardContext) const [postcard, _] = useDefinedContext(PostcardContext)
const postcardUrl = typeof postcard === "string" ? postcard : postcard.src
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
return ( return <>
<img <div
className="postcard" className="postcard"
src={typeof postcard === "string" ? postcard : postcard.src} style={{backgroundImage: `url(${postcardUrl})`}}
alt=""
draggable={false}
/> />
) </>
} }

4
styles/globals.css
View file

@ -110,7 +110,9 @@ input.negative, button.negative {
.postcard { .postcard {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
object-fit: cover;
background-attachment: fixed;
background-size: cover;
position: absolute; position: absolute;
z-index: -1; z-index: -1;