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

【问题标题】：How can I make a background image repeat using React gatsby-background-image?如何使用 React gatsby-background-image 重复背景图像？
【发布时间】：2020-09-23 11:11:04
【问题描述】：

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

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

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

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

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

【问题讨论】：

style={{backgroundSize: '', backgroundPosition: '', backgroundRepeat: '',}} Styling & Passed Through Styles

标签： reactjs gatsby gatsby-image

【解决方案1】：

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

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

【讨论】：

非常感谢您的帮助！当我尝试自己添加 backgroundRepeat 样式元素时，背景图像仍然“拉伸”。根据您的建议，如果我还设置了 backgroundSize 样式元素，那么它可以工作！即style={{ backgroundRepeat: 'repeat', backgroundSize: '200' }}。