title: Multiple background images in Gatsby using linear gradient
body: <p>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:</p>
  <pre><code>import React from &quot;react&quot;
  import { graphql, useStaticQuery } from &quot;gatsby&quot;
  import { getImage } from &quot;gatsby-plugin-image&quot;
  import styled from &quot;styled-components&quot;
  import { BgImage } from &quot;gbimage-bridge&quot;
  
  
  const GbiBridged = ({ children }) =&gt; {
    const { placeholderImage } = useStaticQuery(
      graphql`
        query {
          placeholderImage: file(name: { eq: &quot;dust-background&quot; }) {
            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 &lt;BgImage image={combinedBgImages}&gt;{children}&lt;/BgImage&gt;
  }
  
  export default GbiBridged
  </code></pre>
  <p>I can't get any background (apears white) because I get the following warning when checking elements/styles in the browser:
  Invalid Property value:</p>
  <pre>
  background-image: <s>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; };
  }</s></pre>
  <p>Thank you!</p>