How to use gatsby background image plugin

I'm new to gatsby and i'm trying to use gatsby background image plugin but it does not work, the image wont show on screen.

Here's my code :

import * as React from "react"
import { graphql, useStaticQuery } from 'gatsby'
import { createGlobalStyle } from "styled-components"
import BackgroundImage from 'gatsby-background-image'


const GlobalStyle = createGlobalStyle`
body{
    background-color: #270A63;
    margin : 0px;
   display:flex;
   
    
}`


const Layout = (props, { children }) => {

  const data = useStaticQuery(
    graphql`
      query {
        bgImage : file(relativePath: {eq: "background.png"}) {
          childImageSharp {
            gatsbyImageData(quality: 90)
          }
        }
      }
    `
  )

  const imageData = data.bgImage.childImageSharp.gatsbyImageData;

  return (
    <React.Fragment>
      <GlobalStyle />
      <BackgroundImage

        Tag="section"
        image={imageData}
        
      >
      </BackgroundImage>

    </React.Fragment>

  )
 
}

export default Layout

Layout is a custom component that I'm using in index page. I used console.log to check imageData and it is an object that looks like this :

{bgImage:
childImageSharp:
gatsbyImageData:
backgroundColor: "#680818"
height: 1117
images:
fallback: {src: '/static/32d467ee3060062ab794e34f2002c807/f89cf/background.png', srcSet: '/static/32d467ee3060062ab794e34f2002c807/5829e/bac…60062ab794e34f2002c807/f89cf/background.png 1010w', sizes: '(min-width: 1010px) 1010px, 100vw'}
sources: [{…}]
[[Prototype]]: Object
layout: "constrained"
width: 1010}

I don't understand why it does not work.

Thank you for your help !

Solution

As per your GraphQL, you are using a Gatsby version greater or equal than 3. I think your snippet should look like something like:

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import { getImage, GatsbyImage } from "gatsby-plugin-image"

import { convertToBgImage } from "gbimage-bridge"
import BackgroundImage from 'gatsby-background-image'

const GbiBridged = () => {
  const { bgImage }= useStaticQuery(
    graphql`
      query {
        bgImage : file(relativePath: {eq: "background.png"}) {
          childImageSharp {
            gatsbyImageData(quality: 90)
          }
        }
      }
    `
  )
  const image = getImage(bgImage)
  const backgroundImage= convertToBgImage(image)

  return (
   <React.Fragment>
     <GlobalStyle />
       <BackgroundImage
         Tag="section"
         {...backgroundImage}
         preserveStackingContext
       >
         <div style={{minHeight: 1000, minWidth: 1000}}>
           <GatsbyImage image={image} alt={"testimage"}/>
         </div>
       </BackgroundImage>
   </React.Fragment>
  )
}
export default GbiBridged

Modified from: https://www.gatsbyjs.com/plugins/gatsby-background-image/#gatsby-34--gatsby-plugin-image applying your code

Gatsby changed the image plugin from gatsby-image (Gatsby 1 and 2) to gatsby-plugin-image (version 3 onwards). Among other things, it has changed the internal GraphQL nodes of the image data, hence the workaround of using gatsby-background-image has also changed accordingly. In your case, you are using the deprecated version of gatsby-image so your code is not able to display the image.

You can follow the full discussion in this GitHub thread: https://github.com/timhagn/gatsby-background-image/issues/141