I'm having an issue with the background image on my login page - it doesn't look like the original photo:
Take a look at the screenshot to see the problem with the width of the image: https://i.sstatic.net/qb9u0.jpg
Here's the HTML/jsx code for the page:
<div className="login-page">
<picture>
<source srcSet={mobileImg} media="(min-width: 400px) and (max-width: 700px)" />
<source srcSet={tabletImg} media="(min-width: 700px) and (max-width: 900px)" />
<img srcSet={desktopImg} className="login-background" alt="background image" />
</picture>
<div className="login-wrapper">{children}</div>
</div>
And here's the css part:
.login-page {
display: flex;
justify-content: center;
height: 100%;
width: 100%;
position: relative;
background-size: cover;
}
.login-wrapper {
align-self: center;
position: absolute;
}
.login-background {
height: 100vh;
width: 100vw;
background-size: cover;
background-position: center center;
}
Any suggestions on how to make the image responsive?