"Login/Register Modal with background"
Bootstrap 4.0.0 Snippet by morro

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login/Register</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css "> </head> <body > <button type="button" class="btn btn-danger" data-toggle="modal" data-target=".loginModal">Login</button> <button type="button" class="btn btn-danger" data-toggle="modal" data-target=".registerModal">Register</button> <!--LOGİN MODAL --> <div class="modal fade loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal"> <div class="modal-dialog modal-sm" role="document"> <form class="login"> <div class="text-center"><img src="http://cdn.pcwallart.com/images/rockstar-games-logo-png-wallpaper-3.jpg" width="100" alt=""></div> <div class="form-group"> <label for="inputUsername"></label> <input type="name" class="loginstyle" id="inputUsername" placeholder=" Username" style="font-family:Arial, FontAwesome"> </div> <div class="form-group"> <label for="inputPassword"></label> <input type="password" class="loginstyle" id="inputPassword" placeholder=" Password" style="font-family:Arial, FontAwesome"> </div> <div class="text-center"> <button type="submit" class="btn btn-danger btn-lg ">Login</button> </div> </form> </div> </div> <!--REGİSTER MODAL --> <div class="modal fade registerModal" tabindex="-1" role="dialog" aria-labelledby="RegisterModal"> <div class="modal-dialog modal-sm" role="document"> <form class="login col-md-12" id="register"> <div class="text-center"><img src="http://cdn.pcwallart.com/images/rockstar-games-logo-png-wallpaper-3.jpg" width="100" alt=""></div> <div class="pull-left inputRegister"> <div class="form-group"> <label for="inputRegisterUsername"></label> <input type="name" class="registerstyle" min="1" max="5" id="inputRegisterUsername" placeholder=" Username" style="font-family:Arial, FontAwesome"> </div> <div class="form-group"> <label for="inputRegisterPasswordConfirm"></label> <input type="password" class="registerstyle" min="5" max="10" id="inputRegisterPasswordConfirm" placeholder=" Password confirm" style="font-family:Arial, FontAwesome"> </div> </div> <div class="inputRegister pull-right"> <div class="form-group"> <label for="inputRegisterPassword"></label> <input type="password" class="registerstyle" min="5" max="10" id="inputRegisterPassword" placeholder=" Password" style="font-family:Arial, FontAwesome"> </div> <div class="form-group"> <label for="inputRegisterEmail"></label> <input type="e-mail" class="registerstyle" id="inputRegisterEmail" placeholder=" E-mail " style="font-family:Arial, FontAwesome"> </div> </div> <div class="text-center"> <button type="submit" class="btn btn-danger btn-lg ">Register</button> </div> </form> </div> </div> </body> </html>
body{ background: url("http://jodahome.com/wp-content/uploads/2015/07/The-Crew-2014-Game-HD-Wallpaper-Backgrounds.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .login{ padding: 40px; margin-top: 50px; border: 5px solid rgba(0, 0, 0, 0.44); border-radius: 5px; background: rgba(0, 0, 0, 0.4); } .loginstyle{ height: 54px; padding: 11px 12px; font-size: 16px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; width: 100%; } #register{ position: relative; width: 420px; right: 30px;} .registerstyle{ border-radius: 10px; height: 40px; padding: 11px 12px; font-size: 16px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; width: 100%; } .inputRegister{ width: 180px; } ::-webkit-input-placeholder { color: black; } :-moz-placeholder { /* Firefox 18- */ color: black; } ::-moz-placeholder { /* Firefox 19+ */ color: black; } :-ms-input-placeholder { color: black; }

Related: See More


Questions / Comments: