I'm struggling to get my SVG to display correctly as the background on my website. Currently, it only appears as a small snippet behind one section of the site instead of spanning the entire page. Any assistance would be greatly appreciated.
Here is a fiddle I've created for reference: https://jsfiddle.net/bp123/ku5Ln2so/7/
Path: css
.landing-background {
position: absolute;
top: 0;
min-width: 100vw;
display: flex;
justify-content: flex-start;
overflow: hidden;
z-index: -1;
height: 100%;
box-sizing: border-box;
background-size: 1713px auto;
background-position: center 350px;
background-repeat: no-repeat;
}
Path: webpage
function HomePage(props) {
return (
<div>
<div className="landing-background" style={{ backgroundImage: 'url(/img/background.svg)' }} />
<Container fluid className="mt-5 mb-5 pt-5 pb-5">
<Row className="mx-auto ">
<Col md={10} className="mx-auto">
<h1>My Simple Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare magna sed semper pulvinar. Nam laoreet orci pharetra nisl convallis malesuada.</p>
</Col>
</Row>
</Container>
<Container fluid className="mt-5 mb-5 pt-5 pb-5">
<div className="mx-auto section-width">
<img src="/img/ipad.png" className="ipad" alt="" />
<img src="/img/mobile.png" className="iphoneX" alt="" />
<div className="second-section-copy">
<h2 className="mt-5">Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare magna sed semper pulvinar. Nam laoreet orci pharetra nisl convallis malesuada. </p>
</div>
</div>
</Container>
</div>
);
}