如何添加适配内容的背景图？帆板俱乐部网站Bootstrap布局问题

问题描述 #

为朋友开发高端视觉风格的帆板俱乐部网站，需要在<h1>和<h2>元素后方设置背景图。已添加图片并设置background-repeat: no-repeat，但背景图与标题内容间距过大，怀疑和Bootstrap框架的默认样式有关，期望效果与示例图一致，当前效果不符，寻求解决办法。

当前代码 #

CSS代码 #

body {
  background-color: #B1B2FF;
  font-family: 'Poppins', sans-serif;
}

.navbar-brand,
.nav-link {
  color: #EEF1FF;
}

.addbg {
  background-image: url("images/24.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  height: 400px;
  border-radius: 1%;
}

#top h2 {
  font-family: 'Noto Serif Gujarati', serif;
  letter-spacing: 0.8px;
  color: #EEF1FF;
}

HTML代码 #

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Gujarati:wght@200;300;400&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/1e90402f09.js" crossorigin="anonymous"></script>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Bojark Windsurf</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" aria-current="page" href="#">Ana Sayfa</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Paketlerimiz</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Hakkımızda</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Top Part -->
<section id="top">
  <div class="container-fluid text-center addbg">
    <div class="row ">
      <div class="col-12">
        <h1>Bojark Windsurf</h1>
        <h2>Bambaşka Bir Deneyime Hazır Mısın?</h2>
      </div>
    </div>
  </div>
</section>
<!-- Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

解决方案 #

问题根源确实是Bootstrap的默认间距样式，按以下步骤修改即可解决：

• 清除container-fluid的默认内边距：Bootstrap的container-fluid自带左右内边距，会拉开背景图与容器边缘、标题内容的距离。给.addbg添加p-0类（Bootstrap内置清除内边距类），或自定义CSS：

.addbg {
  padding: 0 !important;
}

• 清除row的默认外边距：Bootstrap的row自带左右外边距，同样会干扰布局。给row添加m-0类，或自定义CSS：

.addbg .row {
  margin: 0 !important;
}

• 让标题内容垂直居中于背景图：当前标题默认靠顶部，通过Flex布局实现垂直居中，修改.addbg的CSS：

.addbg {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，配合text-center更稳妥 */
}

• 调整背景图位置（可选）：如果需要背景图与标题的相对位置更精准，添加background-position属性确保背景图居中：

.addbg {
  background-position: center center;
}

修改后的完整CSS：

body {
  background-color: #B1B2FF;
  font-family: 'Poppins', sans-serif;
}

.navbar-brand,
.nav-link {
  color: #EEF1FF;
}

.addbg {
  background-image: url("images/24.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 400px;
  border-radius: 1%;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addbg .row {
  margin: 0 !important;
}

#top h2 {
  font-family: 'Noto Serif Gujarati', serif;
  letter-spacing: 0.8px;
  color: #EEF1FF;
}

以上修改可消除不必要的间距，让标题内容与背景图贴合，达到预期的高端视觉效果。

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