求助：如何用HTML & CSS实现横幅图片全屏宽度？

你的问题出在全局选择器*设置的min-width和max-width，这两个属性会强制所有元素（包括页面根容器）的宽度被限制在300px到2000px之间，导致横幅没法真正铺满屏幕。

修正后的代码 #

CSS 部分

/* 全局重置只保留margin和padding清零，移除宽度限制 */
* {
  margin: 0;
  padding: 0;
}

/* 确保页面根容器占满屏幕宽度 */
html, body {
  width: 100%;
  overflow-x: hidden; /* 避免横向滚动条 */
}

.header-image {
  background-image: url("idb.jpg");
  margin-top: 20px;
  background-position: center;
  color: black;
  background-repeat: no-repeat;
  height: 400px;
  background-size: cover;
  width: 100%;
}

HTML 部分（无需修改，保持原结构即可）

<header>
  <div class="topa">
    <a class="menu-text" href='./home.html'>Home</a>
    <a class="menu-text" href="./start-a-project.html">Start</a>
    <a class="menu-text" href='./say-hi.html'>Say hi</a>
  </div>
</header>
<br>
<br>
<section class="header-image">
  <div class="header-image-text">
    <h1>Hero Image.
      <p>Text Text Text</p>
    </h1>
  </div>
</section>

关键修改说明 #

• 删掉全局*里的min-width: 300px和max-width: 2000px，解除对所有元素的宽度限制
• 给html和body设置width: 100%，确保页面基础容器铺满屏幕，overflow-x: hidden可以防止出现不必要的横向滚动条
• 保留.header-image的width: 100%和background-size: cover，保证背景图能铺满整个横幅容器

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