diff --git a/src/App.scss b/src/App.scss index 1b40fd8..c1e1e98 100644 --- a/src/App.scss +++ b/src/App.scss @@ -41,23 +41,8 @@ a { text-decoration: none; } -// main is the component enclosing the Home content, including a background image and the text content it will have above it. -// The layering of the content is done with grid: main is the parent, .backrground-img and .home-content are its children -main { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: repeat(2, 1fr); - grid-column-gap: 0px; - grid-row-gap: 0px; -} - -.background-img { - z-index: -2; - grid-area: 1 / 1 / 3 / 2; -} - .home-content { color: $text-color; - z-index: 0; - grid-area: 1 / 1 / 2 / 2; + width: 100vw; + height: 100vh; } \ No newline at end of file diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx index 5114cd8..af04270 100644 --- a/src/Home/Home.tsx +++ b/src/Home/Home.tsx @@ -3,31 +3,31 @@ import DisplayBgImage from '../images/DisplayBgImage'; function Home() { - const [username, setUsername] = useState(""); - const [submitStatus, setSubmitStatus] = useState(false); + const [username, setUsername] = useState(""); + const [submitStatus, setSubmitStatus] = useState(false); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); setSubmitStatus(true); } + const homeBgImg = DisplayBgImage(); + return ( <> -
- -
- {/* Other components and content */} -
- - - {submitStatus ?

Welcome {username}!

: null } -
-
+
+ + {/* Other components and content */} +
+ + + {submitStatus ?

Welcome {username}!

: null} +
diff --git a/src/images/DisplayBgImage.tsx b/src/images/DisplayBgImage.tsx index 10ee7e6..f0387ed 100644 --- a/src/images/DisplayBgImage.tsx +++ b/src/images/DisplayBgImage.tsx @@ -43,9 +43,7 @@ const DisplayBgImage = () => { if (!myPictureData) return (
EMPTY
); - return ( - - ) + return myPictureData.hdurl; };