如何用CSS实现上下各50%无重叠的双背景效果？

我想给一个div设置两张背景图：一张在上半部分，另一张在下半部分，但当前代码实现后两张图重叠且位置不对，请问怎么达到预期效果？

注：相关问题都和我的需求不完全匹配，请不要标记为重复问题，谢谢。

我的HTML代码：

<div>
  <!-- 内容等 -->
</div>

我的CSS代码：

.grid {
    background-image: url('/assets/img/stripes.svg'), url('/assets/img/checks.svg');
    background-position: top, bottom;
    background-repeat: no-repeat, no-repeat;
}

你可以通过给每张背景图指定background-size: 100% 50%，让它们各自占据容器的上下半区，同时调整背景位置确保完全对齐：

.grid {
  background-image: url('/assets/img/stripes.svg'), url('/assets/img/checks.svg');
  background-position: top left, bottom left; /* 分别对齐左上角和左下角 */
  background-repeat: no-repeat;
  background-size: 100% 50%; /* 每张图宽度铺满容器，高度占50% */
}

如果担心背景图被拉伸变形，可以将background-size设置为auto 50%，这样图片会保持原有宽高比，高度占容器的50%，但宽度可能无法铺满容器，你可以根据实际视觉需求调整这个值。

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