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

user_8127115 0
Viewed 354

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!

gatsby-image gatsby reactjs
1 Answers

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>
user_55853710
Related