Currently in the process of developing a single page application using CRA. My goal is to create a hero image with an overlay at the top of the application using a background image. However, I'm facing issues with maintaining the responsiveness of the background image across different screen sizes. I want users to be able to see the entire background image regardless of their screen size.
You can view the desired effect I'm aiming for by following this link: https://www.youtube.com/watch?v=gfzWLbAbcCw&feature=youtu.be
Here is my JSX code:
import React from "react";
import "./styles.scss";
export default function App() {
return (
<>
<div className="container">
<div className="container-background"> </div>
<div className="content">
<div style={{ textAlign: "center", paddingTop: 20 }}>Welcome</div>
</div>
</div>
</>
);
}
And here is my CSS code:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .container-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-image: url('https://i.imgur.com/iyFtMNA.jpg');
opacity: .2;
height: 1200px;
}
.container .content {
position: relative;
z-index: 1;
}
I am struggling with which CSS properties to use to achieve my desired effect. Any suggestions are greatly appreciated!
You can access a debugging sandbox through this link: https://codesandbox.io/s/vigilant-wozniak-t8wmx?file=/src/styles.scss:0-391