How do you add a background gradient to a gatsby image?

Question

I am using gatsby-image and trying to add a dark gradient over the image, but it is not working as expected.

Here's my code:

 <Img
    sx={{
      height: "70vh",
      background: "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
    }}
    fluid={data.tos.childImageSharp.fluid}
  />

Answer 1

Try using Gatsby Background Image and adding the opacity to 1 !important like so

import BackgroundImage from 'gatsby-background-image';
const HeroBackgroundImage = styled(BackgroundImage)`
      width: 100%;
      height: 100vh;
      opacity: 1 !important;
      background-size: cover;
      background: linear-gradient(
        90.26deg,
        rgba(3, 113, 227, 0.9) 17.75%,
        rgba(238, 169, 64, 0.61) 99.89%
      );
      background-size: cover;
    `;