I don't know how to make the background image in html and css fill below the navbar and footer. When I scroll the navigation bar the space is just a blank space, I want it to scroll without space at the top and bottom. Thanks!
* {
box-sizing: border-box;
}
body, html {
margin: 0 auto;
padding: 0;
}
.background-container {
background-image: url("http://placekitten.com/g/500/500");
background-size: cover;
background-position: center;
position: fixed;
width: 100%;
height: 100%;
opacity: 0.5;
z-index: -1;
background-repeat: no-repeat;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
height: 30%; /* Adjust the height as needed */
}
.logo-container img{
max-width: auto;
max-height: 600px;
text-align: center;
}
@media screen and (max-width: 768px) {
/* Adjust background image for mobile devices */
.background-container {
background-position: center;
height: auto;
}
}
.footer {
padding: 25px 0;
background-color: #f2f2f2;
bottom: 0;
width: 100%;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
margin: 0;
padding: 0;
width: 100%;
overflow: auto;
}
@media (max-width: 768px) {
.logo-container {
margin-top: 50px;
}
.footer {
position: relative;
}
.navbar {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">The Backyard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#events">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="background-container"></div>
<div class="logo-container">
<img src="http://placekitten.com/g/100/100" alt="Logo">
</div>
<footer class="footer">
<div class="container">
<p>The Backyard<br>
at Boca Fiesta & Palomino<br>
232 1/2 SE 1st st.<br>
Gainesville, FL 32601</p>
</div>
</footer>
I tried changing the code on the css and html but nothing seemed to change the results.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
In my comment to your question I suggested applying a background image to the
body, but I can't imagine how you would apply opacity this way. So just moveto the top of the page.* { box-sizing: border-box; } body, html { margin: 0 auto; padding: 0; } .background-container { background-image: url("http://placekitten.com/g/500/500"); background-size: cover; background-position: center; position: fixed; width: 100%; height: 100%; opacity: 0.5; z-index: -1; background-repeat: no-repeat; } .logo-container { display: flex; justify-content: center; align-items: center; height: 30%; /* Adjust the height as needed */ } .logo-container img{ max-width: auto; max-height: 600px; text-align: center; } @media screen and (max-width: 768px) { /* Adjust background image for mobile devices */ .background-container { background-position: center; height: auto; } } .footer { padding: 25px 0; background-color: #f2f2f2; bottom: 0; width: 100%; } .navbar { margin-bottom: 0; border-radius: 0; margin: 0; padding: 0; width: 100%; overflow: auto; } @media (max-width: 768px) { .logo-container { margin-top: 50px; } .footer { position: relative; } .navbar { position: relative; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <div class="background-container"></div> <nav class="navbar navbar-expand-sm navbar-light bg-light"> <a class="navbar-brand" href="#">The Backyard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#events">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> <div class="logo-container"> <img src="http://placekitten.com/g/100/100" alt="Logo"> </div> <footer class="footer"> <div class="container"> <p>The Backyard<br> at Boca Fiesta & Palomino<br> 232 1/2 SE 1st st.<br> Gainesville, FL 32601</p> </div> </footer>I don't know why you created a new element to put the BG image instead of just putting it on the
tag, but your problem is because on small screens you are.background-containerSets the size ofheight:autoon the element.You've created an element, fixed its position, and then set it to 100% high and 100% wide. When the screen size is smaller and you set
height:auto, the height of the element is0pxbecause there is nothing inside the element.* { box-sizing: border-box; } body, html { margin: 0 auto; padding: 0; } .background-container { background-image: url("http://placekitten.com/g/500/500"); background-size: cover; background-position: center; position: fixed; width: 100%; height: 100%; opacity: 0.5; z-index: -1; background-repeat: no-repeat; } .logo-container { display: flex; justify-content: center; align-items: center; height: 30%; /* Adjust the height as needed */ } .logo-container img{ max-width: auto; max-height: 600px; text-align: center; } @media screen and (max-width: 768px) { /* Adjust background image for mobile devices */ .background-container { background-position: center; /*height: auto;*/ /* <======= REMOVE THIS */ } } .footer { padding: 25px 0; background-color: #f2f2f2; bottom: 0; width: 100%; } .navbar { margin-bottom: 0; border-radius: 0; margin: 0; padding: 0; width: 100%; overflow: auto; } @media (max-width: 768px) { .logo-container { margin-top: 50px; } .footer { position: relative; } .navbar { position: relative; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <nav class="navbar navbar-expand-sm navbar-light bg-light"> <a class="navbar-brand" href="#">The Backyard</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#events">Events</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </nav> <div class="background-container"></div> <div class="logo-container"> <img src="http://placekitten.com/g/100/100" alt="Logo"> </div> <footer class="footer"> <div class="container"> <p>The Backyard<br> at Boca Fiesta & Palomino<br> 232 1/2 SE 1st st.<br> Gainesville, FL 32601</p> </div> </footer>