本文介绍使用 CSS background 多层背景语法，将同一图像分别在页面左侧和右侧垂直重复显示，避免覆盖或居中偏移问题。
本文介绍使用 css `background` 多层背景语法，将同一图像分别在页面左侧和右侧垂直重复显示，避免覆盖或居中偏移问题。
要实现背景图像在网页左右两侧同时垂直平铺（即左栏一条竖向重复条、右栏一条对称竖向重复条），关键在于放弃单层 background-image 的局限，转而使用 CSS 多层背景（multiple backgrounds） 语法，并通过 background 简写属性精确控制每层的位置、尺寸与重复方式。
以下为推荐写法：
body {
background:
url('background.png') left / 950px repeat-y,
url('background.png') right / 950px repeat-y;
}✅ 这段代码的含义是：
- 定义两层完全相同的背景图像；
- 第一层：定位在
left（容器左边缘），宽度设为950px（即图像在垂直方向上占据的横向空间），repeat-y表示仅沿 Y 轴（纵向）重复； - 第二层：定位在
right（容器右边缘），同样设置950px宽度与repeat-y； - 两层叠加后，图像会分别紧贴视口左右边界向下无限延伸，互不干扰。
⚠️ 注意事项：
- 必须使用
background（而非background-image）属性，因为只有background支持多值逗号分隔语法； -
background-position-x: left, right是隐式生效的，但若需更精细控制（如微调像素偏移），可显式写为left 20px, right 20px； -
background-size需成对指定（如950px, 950px），否则第二层可能回退到默认尺寸； - 若页面有滚动条或容器宽度动态变化，建议配合
html { min-height: 100% }和body { margin: 0; min-height: 100vh }确保背景覆盖全高。
? 扩展提示：
你还可以为左右两侧使用不同图像、不同尺寸或添加透明遮罩层，例如：
body {
background:
linear-gradient(90deg, rgba(0,0,0,0.1), transparent),
url('left-pattern.png') left / 80px repeat-y,
url('right-pattern.png') right / 80px repeat-y;
}这样即可构建出结构清晰、视觉平衡的双侧装饰性边栏效果。
