background-repeat: repeat-y不生效，背景图无法按预期重复问题求助

你的问题核心在于**background-size: cover和background-repeat: repeat-y的冲突**：

background-size: cover会将背景图等比例拉伸，直到完全覆盖.sky元素的宽高。此时背景图的高度已经等于（甚至超过）.sky的高度，没有多余空间让图片垂直重复，所以repeat-y自然不会生效。

修复方案 #

步骤1：调整background-size

移除background-size: cover，改用适合重复的尺寸设置，比如：

background-size: 100% auto; /* 宽度铺满容器，高度保持原图比例 */

这样如果.sky的高度大于背景图的原始高度，就会自动垂直重复。

步骤2：修正动画逻辑

要实现背景向下滚动的效果，更高效的方式是修改background-position而非移动元素本身（移动元素可能导致布局问题）。补充完整动画关键帧：

@keyframes movingsky {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

修改后的完整.sky CSS #

.sky{
    height: 100%;
    width: 100%;
    background-image: url(/images/sky.jpg);
    background-size: 100% auto;
    background-repeat: repeat-y;
    animation: movingsky 4s linear infinite;
}

@keyframes movingsky {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}

额外说明 #

如果你的背景图原始高度远大于容器高度，也可以直接去掉background-size（默认是auto auto），让图片以原始尺寸重复，再配合background-position动画实现滚动效果。

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