change Home and DisplayBgImage so that Home gets background image url…

… from DisplayBgImage and display it as a home background

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

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<HTMLFormElement>) => {
         event.preventDefault();
         setSubmitStatus(true);
     }
 
+    const homeBgImg = DisplayBgImage();
+
     return (
         <>
-        <main>
-        <DisplayBgImage />
-        <div className="home-content">
-        {/* Other components and content */}
-            <form onSubmit={handleSubmit}>
-                <label>Enter name: 
-                    <input type="text"
-                    value={username}
-                    onChange={username => setUsername(username.target.value)} 
-                    />
-                </label>
-                <button type="submit">Submit</button>
-                {submitStatus ? <p>Welcome {username}!</p> : null }
-            </form>
-            </div>
+            <main className="home-content" style={{ backgroundImage: `url(${homeBgImg})` }}>
+
+                {/* Other components and content */}
+                <form onSubmit={handleSubmit}>
+                    <label>Enter name:
+                        <input type="text"
+                            value={username}
+                            onChange={username => setUsername(username.target.value)}
+                        />
+                    </label>
+                    <button type="submit">Submit</button>
+                    {submitStatus ? <p>Welcome {username}!</p> : null}
+                </form>
 
             </main>
         </>

src/images/DisplayBgImage.tsx

@@ -43,9 +43,7 @@ const DisplayBgImage = () => {
     if (!myPictureData) return (<div>EMPTY</div>);
 
 
-    return (
-        <img className='background-img' src={myPictureData.hdurl} />
-    )
+    return myPictureData.hdurl; 
 
 };