I created a div to use an image as a background that covers the entire screen. However, there seems to be a mysterious margin that I can't seem to remove.
After examining the code, I couldn't find any indication that I had configured these margins. When I set the position to fixed in the CSS class for the background, the image appears like this:
https://i.sstatic.net/YQ6uI.jpg
But when I don't set the position to "fixed," it looks like this:
https://i.sstatic.net/K10bl.png
app.component.html
<main>
<router-outlet></router-outlet>
</main>
login.component.html
<div class="back">
<!-- form content here -->
</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;
}
.container {
padding: 16px;
width: 70%;
margin: 0 auto;
text-align: center;
}
.loginbutton {
background: cornflowerblue;
opacity: 0.8;
border-radius: 10%;
color: black;
}
Note: The inline styles will be removed later on.