I defined a div to set an image in background to cover entire screen. But there is a strange margin that I'm unable to get rid of.
I've reviewed the code and found nothing that denotes that I had set up these margins. when set the position to fixed in css class back the image is like this:
But when I don't set the position to "fixed" it looks like this:
app.component.html
<main>
<router-outlet></router-outlet>
</main>
login.component.html
<div class="back">
<form action="" method="post" class="form">
<img src="../../../assets/toolbar_logo_blue.png" alt="logo" style="width: 100%;max-width: 500px">
<div class="container">
<label><b>Email</b>
<input type="text" placeholder="Digite seu email" name="uname" required>
</label>
<label>
<b>Senha</b>
<input type="password" placeholder="Digite sua senha" name="psw" required>
</label>
<button type="submit" class="loginbutton">Logar como: <h4 style="display: inline-block; color: darkcyan;padding: 5px"> Clínica</h4></button>
<div>
<label class="switch">
<input type="checkbox" checked="checked" name="type">
<span class="slider round">
</span>
</label>
</div>
</div>
</form>
</div>
login.component.css
.form {
background-color: transparent;
border: #2196F3;
padding: auto;
margin: auto;
justify-content: center;
width: 50%;
display: block;
height: 50%;
text-align: center;
clear: both;
}
.back {
background: url("../../../assets/background_paper.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
position: fixed;
}
/* Add padding to containers */
.container {
padding: 16px;
width: 70%;
margin: 0 auto;
text-align: center;
}
.container2 {
background-color: rgba(0, 3, 115, 0.21);
float: right;
text-align: center;
}
.loginbutton {
background: cornflowerblue;
opacity: 0.8;
border-radius: 10%;
/*width: 10%;*/
color: black;
/*height: 10%;*/
}
I know about the inline styles I'll outsource it later.

