Блог

Следуя инструкциям в gatsby-background-image документации, я могу добавить полноразмерное фоновое изображение к компоненту, включив в свой компонент следующее

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

Это приводит к следующему «растянутому» фону:

Однако я не хочу, чтобы мое изображение занимало всю ширину компонента. Вместо этого я хотел бы, чтобы мое фоновое изображение повторялось в моем компоненте для достижения следующего:

Я вижу, что поддерживается стилизация фонового изображения, но я не уверен, как правильно оформить фоновое изображение, чтобы оно повторялось. Любая помощь будет высоко оценена!

Просто добавьте style объект, как показано в разделе Styling amp; Passed Through Styles .

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