如何让CSS背景图仅在元素底部区域repeat，无需新增独立div？

无需新增独立div，仅通过单个元素的CSS背景属性即可实现需求。

CSS支持多层背景叠加，你可以将纯色背景和背景图分为两个独立的背景层，分别控制各自的定位、重复规则、尺寸，即可限定背景图仅在底部区域重复显示。

完整代码示例 #

CSS代码 #

section {
  height: 1200px;
  /* 第一层为背景图：定位在底部、横向重复；第二层为全局蓝色背景 */
  background: url('https://pngimg.com/uploads/sun/sun_PNG13449.png') left bottom repeat-x, blue;
  /* 可选配置：如果需要限定背景图仅在底部指定高度范围内显示，比如仅底部150px区域，添加如下属性，调整数值即可控制显示高度 */
  background-size: auto 150px, auto;
}

HTML代码（无需修改） #

<section>
  content etc  content etc  大量重复内容省略
</section>

补充说明 #

• 你之前认为background-position无法实现是误解，该属性作用是指定背景图的起始渲染位置，搭配重复规则、尺寸控制完全可以覆盖这类限定背景显示区域的需求。
• 如果需要背景图在底部同时横向+纵向重复，仅限定整体显示区域为底部固定高度的区块，也可以搭配background-clip属性实现，调整灵活度很高。

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