Background-image css/html-CodePudding

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  >
     <h3>Login </h3>
      <form>
        <div >
          <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 >
            <div >
              <a  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_"G"_Logo.svg/512px-Google_"G"_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.

CodePudding user response：

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 >
<div  >
     <h3>Login </h3>
      <form>
        <div >
          <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 >
            <div >
              <a  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_"G"_Logo.svg/512px-Google_"G"_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;
}

CodePudding user response：

One way to solve this is setting the background to fill up the entire screen with background-size: cover; to make it cover the entire body. Then you can set the background-attachment to fixed. This way you won't see the gradient transition from top to the bottom of the screen, but rather it is just fills 100% of your viewport as you scroll through.

Example snippet with a 3000px element for demonstration purposes:

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 {
  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;
}

.large-content {
  width: 100%;
  height: 3000px;
}

<body>
  <div >
    <h3>Login </h3>
    <form>
      <div >
        <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 >
        <div >
          <a  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_"G"_Logo.svg/512px-Google_"G"_Logo.svg.png" />
          </a>
        </div>
      </div>
      <span>Don't have an account?
        <a routerLink="/signUp">signUp</a></span>
    </form>
    <div ></div>
  </div>
</body>

Optionally you could put a max-height on the form so it doesn't stretch as much. It takes 100% of the viewheight minus the 800px margin(400px 400px) you set.