How can I position the image behind the navbar without any white line in between them? I've tried adjusting the positioning, z-index, and margin, but nothing seems to work. The website is built with Angular 6 and Bootstrap, and I know it's not the most angular approach to have all the code in one stylesheet, but I'm experimenting with it before refactoring.
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular Bootstrap Demo</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
</head>
<body>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor02"
aria-controls="navbarColor02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="text"
placeholder="Search"
/>
<button class="btn btn-secondary my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<!-- -->
<!-- main app root -->
<app-root></app-root>
<!-- -->
<!-- Dependencies -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script>
<!-- -->
</body>
</html>
And here is the stylesheet code:
.jumbotron {
color: #fff;
height: 500px;
}
html {
background-image: url("../assets/images/BBLogo.png");
}
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
#front-page-links {
margin: auto;
width: 50%;
padding: 10px;
}
.logo {
width: 100%;
height: 100vh;
background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
background-size: cover;
}
/* Navbar and Menu Styling */
@font-face {
font-family: circuitBored;
src: url(../assets/fonts/CircuitBoredNF.ttf);
}
... (remaining stylesheet code) ...