When the image is not full screen, it looks fine but when it's viewed in full screen, there's a white area on the right side which is likely due to the image not being large enough. Is there a way to automatically stretch the image so that its width covers the entire screen?
CSS (refer to .landingImage):
.body {
margin: 0px, 50px;
}
.home {
margin-left: 20px;
margin-right: 20px;
padding: 5px 5px;
}
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
margin: 0 auto;
width: 100vw;
}
index.js (developed using nextjs):
<Head>
...
</Head>
<div id="wrapper">
<Image className={indexStyles.landingImage} src={orcas} />
</div>
<div className={indexStyles.home}>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
></meta>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
></link>
</Head>
<body>
...
</body>
</div>
Tried setting width to 100% as well, but it didn't resolve the issue.