fix scaling of background image

src/App.css

@@ -27,15 +27,6 @@ body {
 }
 
 
-.main-container {
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 main {
   height: 100%;
   display: flex;
@@ -55,9 +46,6 @@ main {
   height: fit-content;
 }
 
-img {
-  aspect-ratio: 2/3;
-}
 
 #sidebar {
   flex-basis: calc(var(--poster-width)*2);
@@ -103,6 +91,7 @@ img {
     height: 100%;
     animation: fadeImage 0.5s;
     animation-fill-mode: forwards;
+    aspect-ratio: 2/3;
   }
 }
 
@@ -143,38 +132,19 @@ img {
   }
 }
 
-@keyframes fadeBg {
-  from {
-    opacity: 0;
-    filter: blur(5rem);
-  }
-
-  to {
-    opacity: 1;
-    filter: blur(0);
-  }
-}
 
 #background {
-  background-color: black;
+  /* background-color: black; */
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: -1;
 
-  img {
-    width: 100%;
-    aspect-ratio: 16/9;
-    position: absolute;
-  }
 }
 
-#current-bg {
+.CrossfadeImage {
-  z-index: -1;
+  width: 100%;
-  animation: fadeBg 1s;
+  height: 100%;
-  animation-fill-mode: forwards;
+
-}
 
-#previous-bg {
-  z-index: -2;
 }

src/App.tsx

@@ -6,7 +6,7 @@ import React, { useState, useEffect } from 'react'
 import tmdb from './objects/tmdb'
 import { Sidebar } from './objects/sidebar'
 import { Movie } from './objects/movie-wall'
-
+import CrossfadeImage from 'react-crossfade-image'
 
 export type Config = {
   language: string,
@@ -29,7 +29,7 @@ function App() {
     page: 1
   })
   const [movies, setMovies] = useState([new MovieClass()])
-  const [backdrop, setBackdrop] = useState({ currImg: "", prevImg: "" })
+  const [backdrop, setBackdrop] = useState("")
   const [chosenMovie, setChosenMovie] = useState(new MovieClass())
   const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
 
@@ -38,45 +38,29 @@ function App() {
     const bgString = chosenMovie.backdrop_path ?
       tmdb.makeBgImgUrl(chosenMovie.backdrop_path)
       : tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "")
-    setBackdrop(prev => {
+    setBackdrop(bgString)
-      console.log("NEW PREVIMG: " + prev.currImg)
-      console.log("NE CURRIMG: " + bgString)
-      return {
-        prevImg: prev.currImg,
-        currImg: bgString
-      }
-    })
   }, [movies])
 
-  interface BackgroundProps extends React.ComponentPropsWithRef<"div"> {
+  const crossfadeImageStyles = {
-    backDrop: {
+    width: "100%",
-      currImg: string;
+    aspectRatio: "16/9"
-      prevImg: string;
-    }
-  }
-  const Background = (props: BackgroundProps) => {
-    return <div id="background">
-      <img id="current-bg" src={props.backDrop.currImg} />
-      <img id="previous-bg" src={props.backDrop.prevImg} />
-    </div>
   }
   return (
     <>
-      <Background backDrop={backdrop} />
+      <div id="background">
-      <div id="loader"></div>
+        <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
-      <div className='main-container'>
-        <main >
-          <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} />
-          <div id="movie-wall-container">
-            <MovieWall movies={movies}
-              setMovies={setMovies}
-              config={config}
-              setChosenMovie={setChosenMovie}
-              setSimilarMoviesAvailable={setSimilarMoviesAvailable}
-            />
-          </div>
-        </main>
       </div>
+      <main >
+        <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} />
+        <div id="movie-wall-container">
+          <MovieWall movies={movies}
+            setMovies={setMovies}
+            config={config}
+            setChosenMovie={setChosenMovie}
+            setSimilarMoviesAvailable={setSimilarMoviesAvailable}
+          />
+        </div>
+      </main>
     </>
   )
 }