Search code examples
reactjsgatsbygatsby-image

How can I make a background image repeat using React gatsby-background-image?

Following the instructions in the gatsby-background-image documentation, I'm able to add a full width background image to a component by including the following in my component

    <BackgroundImage fluid={backgroundImage.node.childImageSharp.fluid}>
      {children}
    </BackgroundImage>

This results in the following "stretched" background:

enter image description here

However, I do not want my image to be the full width of the component. Instead, I would like my background image to repeat within my component to achieve the following:

Correct Image

I see that styling of the background image is supported, but I'm not sure how correctly style the background image to make it repeat. Any help would be much appreciated!

Solution

  • Just add the style object as shown in the Styling & Passed Through Styles section.

      <BackgroundImage fluid={backgroundImage.node.childImageSharp.fluid} 
                   style={{ backgroundRepeat: 'repeat', backgroundSize: '200' }}>
      {children}
    </BackgroundImage>