Background-image css/html

April 1, 2022

I’m new to the front end world :D.
I want to set the background of the login page but I can’t put to the whole page. It looks like this:

This is my html:

<body>
<div class="login" >
     <h3>Login </h3>
      <form>
        <div class="ema-pass">
          <label for="email" >Email</label>
          <br>
          <input  required  type="text" style="border-radius: 5px;">
          <br>
          <label for="password" >Password</label>
          <br>
          <input  type="password" style="border-radius: 5px;">
        </div>
        <button>Login</button>
        <br>
        <p>Or sign in with</p>
        <div class="google-sign-in">
            <div class="col-md-3">
              <a class="btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
                <img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
              </a>
            </div>
          </div>
        <span>Don't have an account? 
        <a routerLink="/signUp">signUp</a></span>
      </form>
  </div>
</body>

Css part where is the problem somewhere:

body{
    background: #4261cf;
    background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
    background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1 );
    color: white;
}
.login {
    margin: 400px auto;
    text-align: center;
    max-width: 400px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    line-height: 55px;
    font-family: 'Comic Sans MS';
    box-shadow: 1px 0px 10px 3px;
    z-index: 1;
}

I tried to change .login { margin: 400px auto; into margin: 0 auto; but is not for me cuz is not center on the page.

>Solution :

Try doing this: removing the margin from the .login div, which allows the backgorund to cover the screen, then add a parent div around the .login div, and set the .login div centrally to that div.

Here is what i did:

<body>
  <div class="parentLogin">
<div class="login" >
     <h3>Login </h3>
      <form>
        <div class="ema-pass">
          <label for="email" >Email</label>
          <br>
          <input  required  type="text" style="border-radius: 5px;">
          <br>
          <label for="password" >Password</label>
          <br>
          <input  type="password" style="border-radius: 5px;">
        </div>
        <button>Login</button>
        <br>
        <p>Or sign in with</p>
        <div class="google-sign-in">
            <div class="col-md-3">
              <a class="btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
                <img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
              </a>
            </div>
          </div>
        <span>Don't have an account? 
        <a routerLink="/signUp">signUp</a></span>
      </form>
  </div>
    
    </div>
</body>

body{
    background: #4261cf;
    background: -moz-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #3023ae), color-stop(100%, #53a0fd));
    background: -webkit-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    background: -o-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    background: -ms-linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    background: linear-gradient(45deg, #3023ae 0%, #53a0fd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-start', endColorstr='$gradient-end',GradientType=1 );
    color: white;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.login {
    text-align: center;
    max-width: 400px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    line-height: 55px;
    font-family: 'Comic Sans MS';
    box-shadow: 1px 0px 10px 3px;
    z-index: 1;
}
.parentLogin{
  display: flex;
  justify-content: center;
  align-items: center;
}