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

问题描述

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

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

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

但是，我不希望我的图像成为组件的整个宽度。相反，我希望背景图像在组件中重复以实现以下目标：

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

解决方法

只需添加Styling & Passed Through Styles section中所示的style对象即可。

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