0

trying to create a personal portfolio page for an assessment using the parallax effect. The background image is coming as a little strip in the middle of screen even if I set the min-height property value as 100%.

Please see below the code:

https://codepen.io/HacNass/pen/Ozmzxg?editors=1100

<!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>
 </head>
<body>
<style>
.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: 100%;
  background-image: url('https://startuplab.io/images/webdev-roadmap-2-html-js-css.jpeg');
}
</style>
    <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>
    <script src="css/bootstrap.min.js"></script>
</body>
</html>

Thanks for your answers.

Hacene .N
  • 115
  • 11
  • 100% is relative to parent height, and no height is specified on parent element .. maybe you are looking for `min-height: 100vh;` – Temani Afif Jan 01 '18 at 13:59
  • Possible duplicate of [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) – rafaelcastrocouto Jan 01 '18 at 16:28

0 Answers0