视差效果个人作品集页面：背景图仅显示中间窄条问题求助

你遇到的问题是因为百分比高度的参照链断裂，加上缺少视差效果所需的关键CSS属性，甚至还漏了对应背景图的DOM元素导致的。我来一步步帮你解决：

问题根源 #

1. 当给.pimg1设置min-height: 100%时，它的父元素（body、html）默认没有明确的高度值，这个百分比没有可参照的基准，自然无法撑满整个视口；
2. 视差效果需要特定的背景属性来实现，你当前的代码里完全没配置；
3. 最关键的是——你写了.pimg1的CSS，但页面里根本没有对应的<div>元素，背景图当然无处显示！

具体解决方案 #

1. 给根元素设置高度基准
   给html和body添加高度样式，确保它们能占满整个浏览器视口：

   html, body {
     height: 100%;
     margin: 0;
     padding: 0;
   }
   

2. 完善视差容器的背景属性
   修改.pimg1的CSS，用更可靠的视口单位替代百分比，同时添加视差和背景铺满的关键属性：

   .pimg1 {
     min-height: 100vh; /* 直接基于视口高度，无需依赖父元素 */
     background-image: url('https://startuplab.io/images/webdev-roadmap-2-html-js-css.jpeg');
     background-attachment: fixed; /* 视差核心：滚动时背景固定 */
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover; /* 让背景图自适应容器，铺满整个区域 */
   }
   

3. 添加对应的DOM元素
   在页面里插入.pimg1的容器，让CSS能作用到实际元素上。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>Hacene Nasseur Portfolio</title>
<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-fluid {
 min-height: 100%;
 background: #f9f9f9;
}
#navbar {
 overflow: hidden;
 background-color: #c2d6c7;
 font-family: consolas;
}
#navbar a {
 float: left;
 display: block;
 text-align: center;
 text-decoration: none;
}
.pimg1 {
 min-height: 100vh;
 background-image: url('https://startuplab.io/images/webdev-roadmap-2-html-js-css.jpeg');
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Hacene Nasseur Portfolio</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</nav>
<!-- 补上视差背景的容器 -->
<div class="pimg1"></div>
<script src="css/bootstrap.min.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Hacene .N