gatsby-image: how to import the processed image into css and use it with background-image property

[Mike-Van]

I sucessfully implemented the gatsby-image into my project and replace lots of img tag that are used in my components. But now im trying to optimized the background image for some of my component but i dont know how since using gatsby-image would generate a new img tag, and i cant use that to style as a background for say a div element. can s1 show me how i can use the generated images with css. Here's my code:

const HeaderlineSection = ({headerOne}) => {
  return(
    <div className="header-back" ></div>
  )
}

export const query = graphql`
  query IndexPageQuery {
    headerOne: imageSharp(id: { regex: "/header_one.jpg/" }) {
      sizes(maxWidth: 1200 ) {
        ...GatsbyImageSharpSizes
      }
    }
  }

previously, in my css i use a non optimized image for backgroud-image:

.header-back {
  background: url(../images/header_one.jpg) 50% 0 no-repeat;
  height: 470px;
  width: 100%;
}

[stefanprobst]

using-gatsby-image has an example of gatsby-image for background images:
https://github.com/gatsbyjs/gatsby/blob/6a1f21f0ff02645aa4fab5d69eb3dd8196d8aa31/examples/using-gatsby-image/src/pages/index.js#L12-L17
That uses a normal <img> tag though.
That said, if you really want you should be able to get the images from headerOne.sizes.srcSet and use them in inline styles.

[Mike-Van]

@stefanprobst using an inline style would be great. But i cant get images from headerOne.sizes.srcSet

<div className="header-back" style={{background:url(${headerOne.sizes.srcSet}) 50% 0 no-repeat}}></div>

[LekoArts]

You have to use headerOne.sizes.src.
Reference: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp

As a tip: Use GraphiQL under http://localhost:8000/___graphql. You can test the queries there and auto-complete will show you what the responses are. Fragments don't work out of the box there though.

[Mike-Van]

@LeKoArts thanks...using src works but why is it when i load the images. It doesnt has the blurup effect.

[LekoArts]

Well, you have to use gatsby-image of course. @stefanprobst already linked you the bit on how to use it as a background image.

[stefanprobst]

@Mike-Van Basically, you have three options:

• use gatsby-transformer-sharp just to manipulate the image (like rotate, duotone, etc). You could then get the image src like @LeKoArts showed you and use it in your div's inline styles.
• you want lazy-loading and responsive images, but don't want to use an <img> tag: then you would have to use some regex-magic to get the resized images and media-query breakpoints out of headerOne.sizes.srcSet (and probably some css-in-js solution).
• or you use gatsby-image which conveniently sets everything up for you. It uses an img tag, but there's really no downside to that.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.