如何使用 React gatsby-background-image 重复背景图像？

Question

按照 gatsby-background-image documentation 中的说明，我可以通过在我的组件中包含以下内容来向组件添加全宽背景图像

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

这会导致以下“拉伸”背景：

但是，我不希望我的图像是组件的全宽。相反，我希望我的背景图片在我的组件中重复以实现以下目的：

我看到背景图片的样式是 supported，但我不确定如何正确设置背景图片的样式以使其重复。任何帮助将不胜感激！

Answer 1

只需添加 style 对象，如 Styling & Passed Through Styles section 所示。

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

如何使用 React gatsby-background-image 重复背景图像？

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

reactjs

gatsby

gatsby-image