Can anyone help me figure out why my background image disappears when I add a linear gradient? It shows up fine without the gradient, but as soon as I include it, the image vanishes.
<div className="hero" style={{background: "linear-gradient(to bottom, black, white), url('/agent2.png')", backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}}>
<div className="hero-container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<Navigation />
</div>
</div>
The code works fine without the linear gradient, but I really want to incorporate it. Can someone assist?
<div className="hero" style={{backgroundImage: "url('/agent2.png')", backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat'}}>
<div className="hero-container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<Navigation />
</div>
</div>