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 {
+}
+
+.CrossfadeImage {
   width: 100%;
-    aspect-ratio: 16/9;
+  height: 100%;
-    position: absolute;
-  }
-}
 
-#current-bg {
-  z-index: -1;
-  animation: fadeBg 1s;
-  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,33 +38,18 @@ 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'>
+      </div>
       <main >
         <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} />
         <div id="movie-wall-container">
@@ -76,7 +61,6 @@ function App() {
           />
         </div>
       </main>
-      </div>
     </>
   )
 }