Is it possible to use Multiple Background Images and Art-Direction?

[angelGRivas]

Summary

I want to use multiple background images in a desktop device and a single background image in a mobile device.

Here, https://github.com/timhagn/gatsby-background-image/issues/58#issuecomment-554777145, It seems it was a TODO. I am wondering if it was ever resolved.

Thanks!

Relevant information

I have tried this, but it didnt work for me.

import { graphql, useStaticQuery } from 'gatsby'
import React from 'react'
import styled from 'styled-components'

import BackgroundImage from 'gatsby-background-image'

const MultiBackground = ({ className }) => {
  const {
    mobileImage,
    astronaut,
    seamlessBackground,
  } = useStaticQuery(
    graphql`
      query {
        mobileImage: file(relativePath: { eq: "background_mobile.jpg" }) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
        astronaut: file(relativePath: { eq: "astronaut.png" }) {
          childImageSharp {
            fluid(quality: 100) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
        seamlessBackground: file(
          relativePath: { eq: "seamless-background.jpg" }
        ) {
          childImageSharp {
            fluid(quality: 100, maxWidth: 420) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `
  )

  const sources = [
      mobileImage.childImageSharp.fluid,
      {
        ...astronaut.childImageSharp.fluid,
        media: `(min-width: 769px)`,
      },
      {
        ...seamlessBackground.childImageSharp.fluid,
        media: `(min-width: 769px)`,
      },
    ]

  return (
    <BackgroundImage
      Tag={`section`}
      id={`test`}
      className={className}
      fluid={sources }
    >
      <StyledInnerWrapper>
        <h2>
          This is a test of multiple background images.
        </h2>
      </StyledInnerWrapper>
    </BackgroundImage>
  )
}

const StyledInnerWrapper = styled.div`
  margin-top: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
`

const StyledMultiBackground = styled(MultiBackground)`
  width: 100%;
  min-height: 100vh;
  /* You should set a background-size as the default value is "cover"! */
  background-size: auto;
  /* So we won't have the default "lightgray" background-color. */
  background-color: transparent;
  /* Now again, remember the stacking order of CSS: lowermost comes last! */
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center 155%, center, center;
  color: #fff;
`

export default StyledMultiBackground

[github-actions[bot]]

Hi there! As @timhagn momentarily is the main contributor to this package, this issue has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs, though we're open to suggestions on how to get more maintainers! Thank you for your contributions : )!

[timhagn]

Hi @angelGRivas,

didn't forget about your issue and already worked on it a little, but May & June were packed with work for me - and in other aspects just not "my months" % ).

To give a quick answer to your question: No, in the current version it doesn't work with stacked background images and art-direction thrown in together, the TODO stands (I probably should already have put it in the README ; ).

Gonna take another look today, but it's kinda hard to discern the different array / object combinations (especially with default, i.e. non-media images within). So no promises ^^.

Best,

Tim.

[timhagn]

Hi @angelGRivas,

didn't get around working on this further (still lots of client work), but postponed isn't canceled, so stay tuned ; ).

Best,

Tim.