How to make that I can't scroll on my login page? I've setted margin: 0 in body but this doesn' work... It's pretty ugly since my background is repeating itself when you scroll and it's useless that i able to scroll. Thanks on advance for the help.
My code looks like this;
@import url(https://fonts.googleapis.com/css?family=Fjalla+One); html, body{ height: 100%; width: 100%; margin: 0; background: no-repeat; background-attachment: fixed; } body{ background: #2C3E50; background: -webkit-linear-gradient(to top, #4CA1AF, #2C3E50); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: 'Fjalla One', sans-serif; } .container{ width: 600px; height: 350px; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); display: inline-flex; } .backbox{ background-color: #404040; width: 100%; height: 80%; position: absolute; transform: translate(0,-50%); top:50%; display: inline-flex; border-radius: 15px; } .frontbox{ background-color: white; border-radius: 20px; height: 100%; width: 50%; z-index: 10; position: absolute; right:0; margin-right: 3%; margin-left: 3%; transition: right .8s ease-in-out; } .moving{ right:45%; } .loginMsg, .signupMsg{ width: 50%; height: 100%; font-size: 15px; box-sizing: border-box; } .loginMsg .title, .signupMsg .title{ font-weight: 300; font-size: 18px; } .loginMsg p, .signupMsg p { font-weight: 100; } .textcontent{ color:white; margin-top:65px; margin-left: 12%; } .loginMsg button, .signupMsg button { background-color: deepskyblue; border: 2px solid white; border-radius: 10px; color:white; font-size: 12px; box-sizing: content-box; font-weight: 300; padding:10px; margin-top: 20px; } /* front box content*/ .login, .signup{ padding: 20px; text-align: center; } .login h2, .signup h2 { color: lightblue; font-size:22px; } .inputbox{ margin-top:30px; } .login input, .signup input { display: block; width: 100%; height: 40px; background-color: #f2f2f2; border: none; margin-bottom:20px; font-size: 12px; } .login button, .signup button{ background-color: deepskyblue; border: none; color:white; font-size: 12px; font-weight: 300; box-sizing: content-box; padding:10px; border-radius: 10px; width: 60px; position: absolute; right:30px; bottom: 30px; cursor: pointer; } /* Fade In & Out*/ .login p { cursor: pointer; color:#404040; font-size:15px; } .loginMsg, .signupMsg{ /*opacity: 1;*/ transition: opacity .8s ease-in-out; } .visibility{ opacity: 0; } .hide{ display: none; } #logintitel1 #logintitel2{ background: -webkit-linear-gradient(#141deg, #2cb5e8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Login</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="jslogin.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <link href="stylelogin.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div align="center"> <h1 style="text-transform: uppercase;font-size: 60px;letter-spacing: 2px;text-shadow: #533d4a 1px 1px, #533d4a 2px 2px, #533d4a 3px 3px, #533d4a 4px 4px;text-align: center; margin-top: 60px;"> <span style="transform: rotate(-5deg);margin: 0 auto;display: block;"> <label style="color:#e55643;">Burger</label><label style="color:#2b9f5e;">school</label> </span> </h1> </div> <div class="container"> <div class="backbox"> <div class="loginMsg"> <div class="textcontent"> <p class="title">Heb je nog geen account?</p> <p>Registreer om toegang te krijgen<br /> tot de knowledge base</p> <button id="switch1">Registreer</button> </div> </div> <div class="signupMsg visibility"> <div class="textcontent"> <p class="title">Heb je al een account? </p> <p>Log in om toegang te krijgen <br />tot de knowledge base</p> <button id="switch2" onclick="">Log in</button> </div> </div> </div> <!-- backbox --> <div class="frontbox"> <div class="login"> <asp:Label ID="Label1" class="lbllgn" runat="server" ></asp:Label> <h2 id="logintitel1">Log in</h2> <div class="inputbox"> <input id="txtpcnummerlogin" type="text" name="email" placeholder="PC NUMMER" runat="server"/> <input id="txtwachtwoordlogin" type="password" name="password" placeholder="WACHTWOORD" runat="server"/> </div> <asp:Button ID="Button1" runat="server" Text="Log in" OnClick="Button1_Click" ForeColor="White" BackColor="DeepSkyBlue"/> </div> <div class="signup hide"> <h2 id="logintitel2">Registreer</h2> <div class="inputbox"> <input type="text" id="txtregistreernaam" placeholder="VOLLEDIGE NAAM" runat="server"/> <input type="text" id="txtpcnummerregistreer" placeholder="PC NUMMER" runat="server"/> <input type="password" id="txtwacthwoordregistreer" placeholder="WACHTWOORD" runat="server"/> </div> <asp:Button ID="Button2" runat="server" Text="Registreer" OnClick="Button2_Click" ForeColor="White" BackColor="DeepSkyBlue"/> </div> </div> <!-- frontbox --> </div> </form> </body> <script src="jslogin.js"></script> </html>