Background image covers entire screen but there is a strange margin

Viewed 405

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:

position:fixed

But when I don't set the position to "fixed" it looks like this:

position:relative

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.

2 Answers

Turns out I just set the margin to -8px for now and it did the trick. with chrome developers tools I found out that it was a margin set of 8px in the html element but I couldnt find it declared in the code. Thanks for the answers and comments.

If you're not using a reset style sheet such as normalize or Eric Meyers Reset, you'll need to override the browser defaults.

body {
  margin: 0;
}
Related