Multiple background images in Gatsby using linear gradient

Question

I'm using Gatsby 3.2.1 and I've been trying to combine two background images: actually one is an image another is a linear-gradient the code is as follows:

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { getImage } from "gatsby-plugin-image"
import styled from "styled-components"
import { BgImage } from "gbimage-bridge"


const GbiBridged = ({ children }) => {
  const { placeholderImage } = useStaticQuery(
    graphql`
      query {
        placeholderImage: file(name: { eq: "dust-background" }) {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    `
  )

  const image = getImage(placeholderImage)

  const combinedBgImages = [
    image,
    `linear-gradient(
    rgba(2, 0, 36, 1) 0%,
    rgba(25, 147, 150, 1) 35%,
    rgba(117, 144, 141, 1) 100%`,
  ].reverse()

 

  return <BgImage image={combinedBgImages}>{children}</BgImage>
}

export default GbiBridged

I can't get any background (apears white) because I get the following warning when checking elements/styles in the browser: Invalid Property value:

background-image: linear-gradient( rgba(2, 0, 36, 1) 0%, rgba(25, 147, 150, 1) 35%, rgba(117, 144, 141, 1) 100%,url(http://localhost:8000/static/cb00063…/2bf0e/dust-background.webp); background-image: -webkit-linear-gradient( rgba(2, 0, 36, 1) 0%, rgba(25, 147, 150, 1) 35%, rgba(117, 144, 141, 1) 100%,url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==); opacity: 0; } .gbi-2113735767-4YexjQ8wGrPS624CPfojbG:after { z-index: -101; background-image: -webkit-linear-gradient( rgba(2, 0, 36, 1) 0%, rgba(25, 147, 150, 1) 35%, rgba(117, 144, 141, 1) 100%,url(http://localhost:8000/static/cb00063…/2bf0e/dust-background.webp); opacity: 1; };
}

Thank you!

Answer 1

You have an unclosed parenthesis at linear-gradient rule:

  const combinedBgImages = [
    image,
    `linear-gradient(
    rgba(2, 0, 36, 1) 0%,
    rgba(25, 147, 150, 1) 35%,
    rgba(117, 144, 141, 1) 100%)`, <-- here
  ].reverse()

In addition, watch out for the stack order, the lowermost image should be placed last (if needed). You may want to:

  const combinedBgImages = [
    `linear-gradient(
    rgba(2, 0, 36, 1) 0%,
    rgba(25, 147, 150, 1) 35%,
    rgba(117, 144, 141, 1) 100%)`,
    image,
  ].reverse()