score:1

Accepted answer

you can go the css variable way. this codepen demonstrates.

basically, in the react file:

<div style={{"--img": "url('https://images.unsplash.com/photo-1610907083431-d36d8947c8e2')"}}>text</div>

and, in css:

background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), var(--img);

if the gradient must also be dynamic, a similar approach should work still.

score:0

the first answer works well.

i am just adding another option you would like to use.

you can have the img url as props just to make your code more dynamic and robust.

here is my use case:

function sndheader({ bgimage }) {
    return (
      <div classname="sndheader" style={{ "--img": `url(${bgimage}), 
      linear-gradient(#e66465, #9198e5)` }}>
      <h1>your title</h1>
    </div>
  )
}

my css looks very minimal and helps you centre everything within the div

.sndheader {
    display: block;
    border-radius: 0px 0px 57px 57px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    text-align: center;
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 
    0.52), rgba(117, 19, 93, 0.73)),
    var(--img);
    background-size: cover;
}

Related Query

More Query from same tag