I have been struggling to create a background with a video (z-index -2) and an image overlay (z-index -1). While I have managed to achieve this, I am having trouble getting the image to go all the way to the bottom where the footer is located. I am unsure about which CSS properties I need to make this happen.
I have spent several hours attempting to move it to the bottom without success.
https://i.sstatic.net/5fGxU.png
I am using create-react-app and tailwindcss
Background.js
import React from "react";
import BackgroundVideo from "./BackgroundVideo";
import testVideo from "../../media/videos/test_video.mp4";
import homeSkyline from "../../media/images/homeSkyline.png";
import BackgroundImage from "./BackgroundImage";
function Background() {
return (
<div className="fixed h-screen w-screen overflow-hidden">
<BackgroundVideo video={testVideo} />
<BackgroundImage image={homeSkyline} />
</div>
);
}
export default Background;
BackgroundImage.js
import React from "react";
// provides image and styling for Background
function BackgroundImage(props) {
const { image } = props;
return (
<div className="relative z-negative1 h-screen w-screen">
<img src={image} alt="" className=" min-w-10 inset-x-0 bottom-0" />
</div>
);
}
export default BackgroundImage;
BackgroundVideo.js
import React from "react";
// provides video for Background and styling
function BackgroundVideo(props) {
const { video } = props;
return (
<video
className="absolute z-negative1 min-h-none min-w-none max-w-3xl md:max-w-none"
autoPlay
loop
muted
>
<source src={video} type="video/mp4" />
Your browser does not support the video tag
</video>
);
}
export default BackgroundVideo;
App.js
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import Activities from "./pages/Activities";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Book from "./pages/Book";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Background from "./components/background/Background";
function App() {
return (
<div className="relative flex flex-col h-screen w-screen justify-between z-1">
<Background />
<Router>
<Navbar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/activities" exact component={Activities} />
<Route path="/about" exact component={About} />
<Route path="/book" exact component={Book} />
<Route path="/contact" exact component={Contact} />
</Switch>
<Footer />
</Router>
</div>
);
}
export default App;