Any clue as to why my background image is not showing when i add a linear gradient. when i tak eout the linear gradien the background image shows up fine but when i add the linear gradient the background image doesnt show up.

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

this code works as it doesnt have the linear gradient but i want the linear gradient

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