React组件中background-repeat属性不生效问题求助

核心问题在于你设置的backgroundSize: 'cover'和backgroundRepeat: 'repeat'属性冲突：

• cover会强制背景图缩放至完全覆盖容器的宽高，图片会被拉伸或裁剪以填满整个容器，此时容器内没有多余空间让图片重复显示，所以repeat属性会被忽略。

解决方案 #

修改你的backgroundStyle配置，移除backgroundSize: 'cover'，替换为适合重复显示的尺寸设置：

const backgroundStyle = {
  backgroundImage: `url(${process.env.NEXT_PUBLIC_BASE_PATH}/assets/jadwal/BackgroundPertandingan.png)`,
  // 移除cover，使用auto保持图片原尺寸，或指定具体尺寸如'200px'
  backgroundSize: 'auto',
  backgroundPosition: 'center top',
  backgroundRepeat: 'repeat',
}

额外优化建议 #

• 如果需要让背景图在重复的同时保持一定的缩放比例，可以指定具体的宽高值，比如backgroundSize: '300px auto'，这样图片会按比例缩放后重复排列。
• 你在main标签的className中添加了bg-repeat，这和行内样式的backgroundRepeat: 'repeat'功能重复，可根据习惯保留其中一种，避免样式冗余。

验证效果 #

修改后，背景图会以原尺寸（或你指定的尺寸）在容器内重复平铺，覆盖整个main区域。

内容的提问来源于stack exchange，提问作者Darriel Markerizal