How to create a login screen with changing background images? - reactjs

Question

I have a login page. As per the wireframes, there are images in the background and they change in every few seconds.
Consider it like a splash screen with a login form. I have developed the login form. But the splash screen is the issue.
How do I achieve this with react.js?
Any leads would be helpful.

Answer 1

The gist is to setup a background image container (likely taking 100% of the view height and width) with the following CSS:
// keep image from scrolling when content is scrollable
background-attachment: fixed;
// center the image within the container
background-position: center;
// scale the image to cover the container the smaller quantity of width or height
background-size: cover;
width: 100vw;
height: 100vh;
Then in code choose your flavor of CSS-in-JS. I like styled-components, but for brevity I'll use an in-line style attribute:
style={{ backgroundImage: `url(${/* pass reference to image */})` }}
Sample Component:
import bgImgArray from './assets/img';
function App() {
const [index, setIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() => setIndex(i => i + 1), 5000);
return () => clearInterval(timer);
}, []);
const bgImg = bgImgArray[index % bgImgArray.length];
return (
<div
className="App backgroundContainer"
style={{
backgroundImage: `url(${bgImg})`
}}
>
/* container content, children, etc.. */
</div>
);
}