My aim is to create a pomodoro timer using Next.js and I'm trying to link the body's background image to a state. However, my code isn't functioning properly.
This is the code I used to update the body style:
import { VscDebugRestart } from "react-icons/vsc";
import { IoMdSettings } from "react-icons/io";
import { AiFillPlayCircle, AiFillPauseCircle } from "react-icons/ai";
import { FaTasks } from "react-icons/fa";
import { Modal } from "@/components";
import { useModal } from "@/components/modal";
import { useEffect } from "react";
const Timer = () => {
const settingsModal = useModal();
const tasksModal = useModal();
// Update
useEffect(() => {
document.body.style.background =
"url('/images/city-3.jpg') no-repeat center center fixed;";
}, []);
return (
<div className="timer">
<div className="session-options">
<button className="btn">studying</button>
<button className="btn">short break</button>
<button className="btn">long break</button>
</div>
<h1 className="time-info">1:30:00</h1>
<div className="options">
<AiFillPlayCircle className="btn-icon" />
{/* <AiFillPauseCircle className="btn-icon" /> */}
<VscDebugRestart className="btn-icon" />
<IoMdSettings
className="btn-icon"
onClick={settingsModal.open}
/>
<FaTasks className="btn-icon" />
</div>
<Modal modal={settingsModal}>settings</Modal>
</div>
);
};
export default Timer;
However, the styling isn't being applied and I haven't encountered any failed requests for the image. (I am certain that the image exists) What steps can I take to rectify this? Are there alternative solutions that would ensure the image adjusts to fit the background even when the size changes?