I keep noticing a gap between my wrapper and the top of the page. Despite trying multiple solutions, none seem to work for me. The background image covers the entire background and is aligned at the top perfectly, but the wrapper with its own background appears to have an unwanted margin.
body {
height: 100vh;
background: url("https://i.imgur.com/HgflTDf.jpg") 50% fixed;
background-size: cover;
}
.wrap {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
background: rgba(17, 71, 114, 0.85);
top: 0;
}
.login {
border-radius: 2px 2px 5px 5px;
padding: 10px 20px 20px 20px;
width: 90%;
max-width: 320px;
background: #ffffff;
position: relative;
padding-bottom: 80px;
}
input {
display: block;
padding: 15px 10px;
margin-bottom: 10px;
width: 100%;
border: 1px solid #ddd;
transition: border-width 0.2s ease;
border-radius: 2px;
}
input:focus {
outline: none;
color: #444;
border-color: 2196F3;
border-left-width: 35px;
}
.fa {
color: #fff;
font-size: 1em;
position: absolute;
margin-top: -47px;
opacity: 0;
left: 0;
transition: all 0.1s ease-in;
}
.fa:focus {
opacity: 1;
left: 30px;
transition: all 0.25s ease-out;
}
.tittel {
color: #444;
font-size: 1.2em;
font-weight: bold;
margin: 10px 0 30px 0;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.sub {
width: 100%;
height: 100%;
padding: 10px 10px;
background: #2196F3;
color: #444;
display: block;
border: none;
margin-top: 20px;
margin-bottom: 0px;
position: absolute;
left: 0;
bottom: 0;
max-height: 60px;
border: 0px solid rgba(0, 0, 0, 0.1);
border-radius: 0 0 2px 2px;
transform: rotateZ(0deg);
transition: all 0.1s ease-out;
border-bottom-width: 7px;
}
footer {
display: block;
padding-top: 50px;
text-align: center;
color: #fff;
font-weight: normal;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
font-size: 0.8em;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<div class="wrap">
<form action="" method="post" class="login needs-validation" novalidate>
<h4 class="tittel">Login</h4>
<input type="text" name="username" value="" placeholder="Username" required autofocus/>
<i class="fa fa-user"></i>
<input type="password" name="password" placeholder="Password" required>
<i class="fa fa-key"></i>
<input type="submit" class="sub" value="Login">
</form>
<footer>Company name</footer>
</div>UPDATE: The wrapper appears to be situated around 30-40px below the top. This specific length allows for scrolling down the page. I've attempted various adjustments such as removing padding from the .wrap class, disabling the body background, and experimenting in Chrome's site inspector by toggling CSS properties on and off. Unfortunately, none of these actions have made a noticeable difference.