I am currently working on emulating a layout that I came across on another website ( if you scroll down past the video and profiles). The layout involves splitting the page 50/50 with a picture that is responsive and maintains its size when the page is resized. I am utilizing Material UI's grid system, similar to CSS flexbox. I read on Stack Overflow to use a div with a background-image property but have been struggling with this solution. Any assistance in resolving this issue or trying an alternative approach (such as using an img tag) would be greatly appreciated.
Here is what I have implemented so far:
<Grid container spacing={0}>
<Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
<div className="fill">
<div style={{backgroundImage: `url(${stock1})`}}/>
</div>
</Grid>
<Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
<div className="missionHeader " name="aboutus">
<h1>WHAT WE STAND FOR</h1>
<p>{standFor}</p>
</div>
</Grid>
</Grid>
The fill class only has one property, which is background-size: cover.