* {
padding: 0;
margin: 0;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.example3 .navbar-brand {
height: 59px;
margin-top: -4px;
}
.example3 .nav>li>a {
padding-top: 19.5px;
padding-bottom: 19.5px;
font-size: 17px;
}
.example3 .navbar-toggle {
padding: 18px;
margin: 15px 15px 15px 0px;
}
#nav {
background-color: rgba(19, 19, 19, 0.91);
margin: 0 !important;
}
#navbutton {
background-color: rgba(19, 19, 19, 0.91);
color: rgba(240, 231, 232, 1.00);
}
#welkomlogin {
text-align: center;
color: white;
background-image: url(public_html/images/HQ.png);
background: linear-gradient(rgba(49, 49, 49, 0.50), rgba(49, 49, 49, 0.50)), url('public_html/images/HQ.png');
background-size: 100%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: black;
height: 700px;
}
#welkom {
text-align: center;
}
#login {
text-align: center;
}
.buttonwelkom {
margin: 10px 40px;
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}
.buttonwelkom:hover,
.buttonwelkom:active {
text-decoration: none;
color: #fff;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff;
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}
<div class="example3">
<nav class="navbar navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar3">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="public_html/images/afdeling.gif" alt="RC-logo" height="40px">
</a>
</div>
<div id="navbar3" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Over ons</a></li>
<li><a href="#">Meest gestelde vragen</a></li>
<li><a href="#">Contact</a></li>
<li>
<button id="navbutton" class="btn btn-default navbar-btn" type="button">
Inloggen
</button>
</li>
</ul>
</div>
</div>
</nav>
</div>
<section id="welkomlogin">
<div id="welkom">
<h1>Head titel</h1>
<p>beschrijving....</p>
</div>
<div id="login">
<a class="buttonwelkom" href="#">Inloggen</a>
<a class="buttonwelkom" href="#">Over ons</a>
</div>
</section>