How do I set a linear gradient over a background image in React?

Question

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;
}

Answer 1

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;