本文介绍使用 CSS background 简写属性，通过多层背景技术，在页面左侧和右侧同时垂直重复同一张图片，实现对称装饰效果，无需额外 HTML 元素或 JavaScript。
本文介绍使用 css `background` 简写属性，通过多层背景技术，在页面左侧和右侧同时垂直重复同一张图片，实现对称装饰效果，无需额外 html 元素或 javascript。
要实现在网页左右两侧均垂直重复同一张背景图（如边框式装饰、分栏视觉引导等），关键在于利用 CSS 的多层背景（multiple backgrounds）特性。单靠 background-image 无法指定位置与尺寸的组合控制；必须使用 background（或其子属性）进行分层定义。
正确做法是将同一张图片作为两层背景：一层定位在 left，另一层定位在 right，每层均设置 repeat-y 并统一控制宽度（即 background-size）。推荐使用 background 简写语法，清晰且兼容性好（支持 IE10+ 及所有现代浏览器）：
body {
background:
url('background.png') left / 950px repeat-y,
url('background.png') right / 950px repeat-y;
}
✅ 这段代码含义明确：
- 第一层：图片置于左侧，宽度缩放为
950px，仅沿 Y 轴重复； - 第二层：图片置于右侧，同样缩放为
950px，同样垂直重复； - 层叠顺序为从后到前（第一层在底层，第二层在上层），但因左右分离，实际互不遮挡。
⚠️ 注意事项：
- 必须使用
background（而非background-image）才能同时设置position、size和repeat； - 各层属性用英文逗号
,分隔，每层内用空格分隔image position / size repeat； -
background-size: 950px表示宽度为 950px，高度自动等比缩放（若需固定高宽，可写950px 100%或contain/cover）； - 若页面内容区域较窄，建议配合
background-attachment: scroll（默认值）确保滚动时背景随内容自然移动； - 如需留出中央内容区，可进一步添加
padding-left和padding-right避免文字被背景覆盖。
? 扩展提示：
你也可以为左右背景使用不同图片、不同尺寸或不同重复方式（例如左侧 repeat-y，右侧 no-repeat），灵活构建复杂视觉布局。多层背景是现代 CSS 中高效替代伪元素或冗余 DOM 的重要手段。
综上，通过一行精炼的 background 声明，即可优雅实现双侧垂直平铺，兼顾语义性、可维护性与性能。
