import React from 'react'; import { graphql, StaticQuery } from 'gatsby'; import BackgroundImage from 'gatsby-background-image'; import ITFLogo from '../../images/logos/ITF-logo.png'; const HomePageLogo = () => ( <StaticQuery query={graphql` query { desktop: file(relativePath: { eq: "images/logos/ITF-home-logo.png" }) { childImageSharp { fluid(quality: 100) { ...GatsbyImageSharpFluid_withWebp } } } } `} render={(data) => { const imageData = data.desktop.childImageSharp.fluid; return ( <BackgroundImage Tag="section" style={{ height: '60vh', width: '100vw', backgroundColor: 'transparent', backgroundSize: 'cover', backgroundPosition: 'center center', display: 'flex', alignItems: 'center', }} fluid={imageData} backgroundColor="#040e18" > <img src={ITFLogo} alt="ITFLogo" style={{ margin: '0 35% 0 38%' }} /> </BackgroundImage> ); }} /> ); export default HomePageLogo;