[gatsby] background-image

Dynamic gatsby-image (or background-image)

Component

import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import Img from 'gatsby-image';

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename);
      });
      if (!image) {
        return null;
      }

      //const imageSizes = image.node.childImageSharp.sizes; sizes={imageSizes}
      return <Img alt={props.alt} fluid={image.node.childImageSharp.fluid} />;
    }}
  />
);

export default Image;

Using

import Image from '../components/Image';
<div style={{ maxWidth: `300px` }}>
    <Image alt="Gatsby in Space" filename="gatsby-astronaut.png" />
</div>

Adding linear-gradient to background-image

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