I have been trying for over an hour and this is the only thing I can come up with. I built the app with CRA so I have to keep the image in the img folder. I am new to React some I am at a lost here for what to do/
import NavBar from "./NavBar";
// import SocialMedia from "../socialmedia/SocialMedia";
import classes from './MainView.module.css';
import background from '../../img/pic2.jpg';
function MainView() {
const style = {
backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
};
return (
<>
<NavBar />
<section style={{ style }}
className={classes.top}>
<div>
<p>My Name</p>
<p>Full Stack Web Developer</p>
</div>
</section>
{/* <SocialMedia /> */}
</>
)
}
export default MainView;
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Trispace&display=swap');
.top {
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
width: 100%;
height: 100%;
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
CodePudding user response:
From what I can tell the code is mostly correct. The one issue I see is with how you pass/set the style
prop. You are passing an object with a style
property with the CSS rules nested deeper.
<section
style={{ style }} // <-- style properties nested too deeply!
className={classes.top}
>
...
</section>
This results in a style
prop that looks more like this:
{
style: {
backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`,
}
}
when you just want:
{
backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
}
The solution is to just pass style
as the prop value:
style={style}
or spread the style
object into the style
prop:
style={{ ...style }}
I suggest the former.
Full example:
import NavBar from "./NavBar";
// import SocialMedia from "../socialmedia/SocialMedia";
import classes from './MainView.module.css';
import background from '../../img/pic2.jpg';
function MainView() {
const style = {
backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
};
return (
<>
<NavBar />
<section
style={style} // <-- pass the style object directly
className={classes.top}
>
<div>
<p>My Name</p>
<p>Full Stack Web Developer</p>
</div>
</section>
{/* <SocialMedia /> */}
</>
)
}
export default MainView;