1

Being new to web development I tried making a nice login. I couldn't get the positions of the elements right and I was forced to use " background-attachment: fixed !important; ".

Is there any other way of achieving the same results {picture given below} without using ``` background-attachment: fixed !important;

Here is my code:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  height: 100%;
  background: linear-gradient( red, green);
  background-attachment: fixed !important;
}

.box {
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #191919;
  text-align: center;
}

.box h1 {
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}

.box input[type="text"],
.box input[type="password"] {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}

.box input[type="text"]:focus,
.box input[type="password"]:focus {
  width: 280px;
  border-color: #2ecc71;
}

.box input[type="submit"] {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 40px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}

.box input[type="submit"]:hover {
  background: #2ecc71;
}
<form class="box" action="index.html" method="POST">
  <h1>Login</h1>
  <input type="text" name="" placeholder="Username">
  <input type="password" name="" placeholder="password">
  <input type="submit" name="" value="Login">
</form>

My Desired Result enter image description here

I googled a lot to find a good solution for this simple problem, but got more confused, so I want some experience person's advice on this, and do's and don't as a beginner.

{ For the Ans, I would be grateful if you could put the whole code and explain why you chose a particular style and how it resolves the general problem ( I read that using "background-attachment: fixed !important; " might cause trouble) } Thankyou.

----------------------- After Edits ----------------------------------

The Problem here is, without " background-attachment: fixed !important; " the background gradient doesn't work. and if I put position as relative for the "box" element, the result is different than what I want.

So, I want the positions correct {as per the Image }, with Background gradient, and without background-attachment: fixed !important;

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Adarsh Kumar
  • 73
  • 1
  • 6
  • _"...and how it resolves the general problem"_ - What problem? I don't see any... – Andreas Feb 23 '20 at 17:42
  • what are you trying to achieve? also you can show us using codesandbox.io – Antoine Feb 23 '20 at 17:42
  • I read some where that using " background-attachment: fixed !important; " will cause problem, and this habit should be avoided. – Adarsh Kumar Feb 23 '20 at 17:43
  • @Andreas The gradient doesn't work without using " background-attachment: fixed !important; ", so could you help me by suggesting an alternative way, of having a background gradient? only by using HTML and CSS. – Adarsh Kumar Feb 23 '20 at 18:18
  • 1
    you are missing : `html {height:100%;}` or make it height:100vh for body . absolute element off the flow do expand their parents. body here was 0pixel of height. height:XX% requires a parent with an height set so it can be calculated. Only HTML can be 100% of tthe viewport. duplicate : https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height . However, the best is to avoid position:absolute, so html/body can stretch. display can help center things . a flex example : https://codepen.io/gc-nomade/pen/poJRzdR no side effects cutting the form or at the background – G-Cyrillus Feb 23 '20 at 18:48
  • 1
    @G-Cyr you may want to vote to reopen the question so we can close it again as duplicate. I also know another duplicate closer to this situation: https://stackoverflow.com/q/54728621/8620333 – Temani Afif Feb 23 '20 at 19:48
  • Thanks @G-Cyr , Your Solution Works. I don't have enough Reputation for now, but will come to vote for re-open once I have enough Points. – Adarsh Kumar Feb 23 '20 at 20:10

1 Answers1

-1

You could use javascript to set the backgrounds height equals your scrolling.

EKnot
  • 151
  • 1
  • 9
  • Thanks for the suggestion, that might give me the result I want, But i have two problems here. First, As a beginner I have little to no experience with JS. Second, This Login Page is very simple and should be achievable by Html and CSS. As I lack experience, I want to know how to make web pages with " HTML and CSS " only before going on making webpages with JS. Thanks again. – Adarsh Kumar Feb 23 '20 at 17:52