steffo/festa
steffo/festa
1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 14:44:21 +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() {
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})`}}
/>
)
</>
}

4
styles/globals.css
View file

@ -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;