CSS背景图仅在h3标签显示无法铺满整行/列且被裁切如何解决

问题根因 #

• 标题与正文无法拆分：你把标题、正文全部写在同一个<h3>标签内，<h3>属于专有标题语义标签，不能承载正文内容，且背景图直接绑定在<h3>上也会打乱排版逻辑
• 背景图裁切、宽度与其他行不一致：你使用的是Bootstrap栅格系统，.col-sm默认自带左右内边距，背景图绑定在列内的<h3>元素上时，会被内边距限制宽度无法铺满整列；同时容器没有设置足够的内边距撑开高度，背景图按cover规则缩放时就会被裁切

修正后代码 #

CSS代码 #

/* 背景绑定到包裹内容的父容器，而非标题标签 */
.gramps-image-wrap {
  background-image: url("https://i.ibb.co/H7Y0z8K/Blackandwhitegramps.jpg");
  background-color: #000; 
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  /* 加内边距撑开容器高度，调整文字位置 */
  padding: 4rem 2rem;
  color: #fff;
}
/* 单独设置标题样式 */
.gramps-image-wrap h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
}

HTML代码 #

<div class="row">
  <div class="col-sm p-0"> <!-- 清空col默认左右内边距，让背景铺满整列 -->
    <div class="gramps-image-wrap">
      <h3>推荐目的地：布兰巴克（格兰扁）可食用丛林食物步道</h3>
      <p>数百年来，原生可食用植物一直是人类的食物来源。这条8公里长的步道位于布兰巴克（格兰扁）核心区域，你可以搭配由贾达瓦贾利人和贾布武朗人合作制作的可下载指南，了解丛林食物的重要价值。</p>
    </div>
  </div> 
</div>

改动说明 #

1. 拆分标题与正文：将正文从<h3>标签中移出，放在独立的<p>标签内，语义和排版完全分离，后续可单独调整两者的样式
2. 调整背景图绑定对象：将背景图从<h3>移到包裹标题、正文的父容器gramps-image-wrap上，背景会覆盖整个内容区域
3. 清空列默认内边距：给.col-sm添加Bootstrap自带的p-0类清空内边距，背景宽度即可和其他行保持一致
4. 给父容器添加内边距：撑开容器高度的同时调整文字位置，背景图按cover规则缩放时不会因为容器高度不足被裁切，匹配预期效果

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