linear-gradient over Gatsby-Background-Image

126
March 03, 2021, at 08:50 AM

I have an image that I reference from with a Graphql query in my code. Over this image I want to have a linear-gradient, which is located in my css module. How can I go about this without using css written in my javascript file?

Having the linear-gradient written in the js file does actually work, but it puts my css style where I don't want it. How can I reference my gradient style in the css module and make it work with Gatsby-Background-Image?

Using the heroGradient class in the css-module file overwrites the whole image. How do I preserve the image in the stack without overwriting it, only applying the gradient on top?

const {image} = useStaticQuery(graphql`
    query {
      image: file(relativePath: { eq: "filename.jpg" }) {
        childImageSharp {
          fluid(quality: 100) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
`)
// This works
// const imageDataStack = [image.childImageSharp.fluid, `linear-gradient(270deg, #ffffff27 30%,  #e8d4b450 100%)`].reverse()
// This doesn't work
const imageDataStack = [image.childImageSharp.fluid, heroStyles.heroGradient].reverse()
  return (
    <BackgroundImage 
      Tag="section"
      className={heroStyles.heroContent}
      fluid={imageDataStack}
      >
      <h1 className={heroStyles.heroText}>
        {site.siteMetadata.description}
      </h1>
    </BackgroundImage>
.hero-gradient {
    background: linear-gradient(270deg, #ffffff27 30%,  #e8d4b450 100%);
Answer 1

How can I go about this without using css written in my javascript file?

You can't since the styles are applied inline. If you use your CSS modules (or another kind of styling) the inline styles will always override your CSS modules, and, in addition, you need the JavaScript logic they apply to the gatsby-image.

You can force this overriding by using and trying the !important but it may lead to some inconsistencies and your background (<BackgroundImage> component) may behave oddly.

The general styling for the <section> (<BackgroundImage>) can be applied using CSS modules but when the rules between the inline styling and the CSS modules styling collide so my suggestion is to apply the non-colliding rules using the CSS modules and leave the inherited inline styling of the <BackgroundImage>.

READ ALSO
Tomcat 9 class loading issue with Jaxb-impl&amp; jaxb-runtime

Tomcat 9 class loading issue with Jaxb-impl& jaxb-runtime

Jaxb-api and jaxb-runtime has same package with same class name called RUNTIMEMODELBUILDERJAVA and same interface with same package Navigator interface

99
Regular expression that accepts only letters, spaces in between words and hyphens after word

Regular expression that accepts only letters, spaces in between words and hyphens after word

I'm trying to write a regular expression to capture what I mentioned above but for the hyphen part, it seems like it still matches words that start with a hyphen

103
Importing whole SVG images folder from another direction

Importing whole SVG images folder from another direction

I want to import whole folder with my SVG icons from another directionFor now i know how to import a single file one by one

41