本文介绍如何使用 CSS background 复合属性，在页面左侧和右侧同时垂直重复同一张背景图片，避免单侧偏移或居中错位问题。
本文介绍如何使用 css `background` 复合属性，在页面左侧和右侧同时垂直重复同一张背景图片，避免单侧偏移或居中错位问题。
要实现背景图在网页左右两侧独立垂直平铺（即左栏一条竖向纹理、右栏一条对称竖向纹理），不能仅依赖 background-image 单一声明——因为它只支持一个图像源，且 background-position 无法为同一图像指定两个位置。
正确方案是利用 CSS 的多背景（multiple backgrounds）特性，通过 background 简写属性一次性定义两层背景：一层定位在 left，另一层定位在 right，二者均设置 repeat-y 并统一控制尺寸。
✅ 推荐写法（简洁可靠）：
body {
background:
url('background.png') left / 950px repeat-y,
url('background.png') right / 950px repeat-y;
}
⚠️ 注意事项：
- 必须使用
background（复合属性），而非background-image—— 后者不支持多图+位置+尺寸的组合声明； - 斜杠
/前为background-position，后为background-size，顺序不可颠倒； - 两层背景用英文逗号分隔，渲染顺序为从后往前叠加（第二层在下，第一层在上），但因左右分离无重叠，视觉效果互不影响；
-
background-size: 950px表示图像宽度为 950px，高度由repeat-y自动延伸；若需等比缩放，可改用950px auto或contain/cover； - 若页面有滚动条或容器宽度变化，建议配合
background-attachment: scroll（默认值）确保随内容滚动同步。
? 扩展提示：
如需微调左右间距（例如避开滚动条或留白），可用精确像素定位替代 left/right：
background:
url('background.png') 20px top / 950px repeat-y, /* 距左边缘20px */
url('background.png') calc(100% - 970px) top / 950px repeat-y; /* 距右边缘20px */
? 总结：多背景是解决“双侧垂直平铺”的标准、语义清晰且兼容性良好的方案（Chrome 1+, Firefox 3.6+, Safari 1.3+ 均支持）。避免尝试复制元素或伪类模拟——既增加 DOM 复杂度，又难以响应式适配。
