0

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}
  />
Colin Sygiel
  • 917
  • 6
  • 18
  • 29

2 Answers2

2

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;
    `;
Theorder
  • 669
  • 2
  • 9
  • 19
1

Solution 1 - using gatsby-image

You can solve this problem using position: relative/absolute like this:

import Img from "gatsby-image"

const Wrapper = styled.div`
  position: relative;
  /* width, height */
`

const Gradient = styled.div`
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(/* your linear-gradient */);
`

const Text = styled.p`
  position: absolute;
  inset: /* position */
`

const Component = () => {
  return(
    <Wrapper>
      <Img fluid={fluid} />
      <Gradient />
      <Text>Gradient over image, text over gradient</Text>
    </Wrapper>
  )
}

or, as proposed above:

Solution 2 - using gatsby-background-image

What has worked for me is to place a <div> on top of the <BackgroundImage>, and then set background: linear-gradient() on that <div>:

import BackgroundImage from "gatsby-background-image"

const Wrapper = styled.div`
  width: /* your width */;
`
const Gradient = styled.div`
  height: /* your height */;
  background: linear-gradient(/* your linear-gradient */);
`

const Component = () => {
  return(
    <Wrapper>
      <BackgroundImage ...>
        <Gradient>
          <p>Gradient over image, text over gradient</p>
        </Gradient>
      <BackgroundImage>
    </Wrapper>
  )
}
Padeti
  • 71
  • 4