如何实现背景图片在网页左右两侧垂直重复排列？

直接使用CSS的多背景图片特性就能实现左右两侧同时垂直重复背景的效果，无需额外操作导致布局偏移。

替换你现有的CSS代码为：

body {
  background-image: url('background.png'), url('background.png');
  background-size: 950px;
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
}

为什么之前的方法会出错 #

你之前尝试设置右侧背景时，应该是没正确处理多背景的语法与定位规则，浏览器默认将背景定位在center，导致原本左侧的图被挤到了中间。而通过多背景语法，我们可以分别指定两张背景图的位置（左侧顶部和右侧顶部），同时保持各自垂直重复，互不干扰。

如果后续需要左右两侧用不同的背景图，只需要把第二个url()里的地址换成对应图片即可。

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