css - 使 2 个背景图像相等

Question

我有 2 个背景图像，我需要像这个版本一样在垂直方向上彼此相等 image

现在我将样式设置为:

background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 925px center;

但是，图像的相等性仅在我查看此视口(viewport)时保持不变。当我退出检查工具时，它搞砸了并调整了它的大小。

我试过 calc() 和其他背景位置，但我没能解决它。

感谢任何帮助。

Answer 1

我认为这应该可以解决问题。之所以将第一个背景应用到body上，是为了当宽度的像素数为奇数时，中间不会出现白线。

*{
  margin:0;
  padding:0;
}
body{
   background: url(https://www.w3schools.com/w3images/fjords.jpg);
   overflow-x: hidden;
}
#right{
   background: url(https://www.w3schools.com/w3css/img_lights.jpg);
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

<div id="right"></div>

引用
https://css-tricks.com/multiple-backgrounds-left-half-and-right-half/