<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebba0bfa0bf">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!--Font awesome icons-->
<script src="https://kit.fontawesome.com/4e9b2916e9.js" crossorigin="anonymous"></script>
<!--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=Roboto:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Bakery</title>
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-white p-2 h5">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="images/logo.jpg" alt="No solo pan y café logo brown">
</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 ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<div class="d-flex me-lg-5 mx-auto">
<ul>
<li><span class="social-icon social-facebook"><i class="fa fa-facebook"></i></span></li>
<li><span class="social-icon social-google"><i class="fa fa-google"></i></span></li>
<li><span class="social-icon social-tripadvisor"><i class="fa fa-tripadvisor" aria-hidden="true"></i></span></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!--Main-->
<section>
</section>
<!--Js-->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9e9393888f888e9d8cbcc9d2cdd2cd">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>It's my first post here so here goes nothing! I'm currently learning the ropes of html/css and at the moment, Bootstrap 5's background image feature has me in a bind. I've attempted to set it for the entire body, but the issue is that only a portion of the image is displayed, with the rest supposed to show as I scroll down, yet scrolling seems to be disabled.
Attached is a screenshot of the website, revealing the missing lower part of the background image. I should be able to scroll down, but for some reason, I'm unable to. Who would've known that a background image could be so challenging to work with in Bootstrap.
What am I overlooking or doing incorrectly? Any gentle guidance is greatly appreciated! Thank you!
Website screenshot Website screenshot
body {
background-color: #eee;
font-family: "Poppins", sans-serif;
font-weight: 300;
background-image:url(/images/sofiya-levchenko-c07dv6i8P4Q-unsplash1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: fixed;
}