"Login Screen With Background"
Bootstrap 3.0.0 Snippet by Mika

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <div id="fullscreen_bg" class="fullscreen_bg"/> <div class="container"> <form class="form-signin"> <h1 class="form-signin-heading text-muted">Sign In</h1> <input type="text" class="form-control" placeholder="Email address" required="" autofocus=""> <input type="password" class="form-control" placeholder="Password" required=""> <button class="btn btn-lg btn-primary btn-block" type="submit"> Sign In </button> </form> </div>
body { padding-top: 120px; padding-bottom: 40px; background-color: #eee; } .btn { outline:0; border:none; border-top:none; border-bottom:none; border-left:none; border-right:none; box-shadow:inset 2px -3px rgba(0,0,0,0.15); } .btn:focus { outline:0; -webkit-outline:0; -moz-outline:0; } .fullscreen_bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: 50% 50%; background-image: url('http://cleancanvas.herokuapp.com/img/backgrounds/color-splash.jpg'); background-repeat:repeat; } .form-signin { max-width: 280px; padding: 15px; margin: 0 auto; margin-top:50px; } .form-signin .form-signin-heading, .form-signin { margin-bottom: 10px; } .form-signin .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="text"] { margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-color: #000; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: none; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: rgb(0,0,0); border-top:1px solid rgba(0,0,0,0.08); } .form-signin-heading { color: #fff; text-align: center; text-shadow: 0 2px 2px rgba(0,0,0,0.5); }

Related: See More

Paper Kit
login-form
Login Form
Bootstrap 4 login from

Questions / Comments:

In our regular use we often change our mobile or computer background. I find here some amazing backgrounds in different ways. We sign in just one time and get all time it’s colorful and natural seen I really like it.

writing service () - 7 years ago - Reply 0

I had an issue that the h1 and the button was being placed behind the background image.

A quick look at the source of the fullscreen example showed the "<div id="fullscreen_bg" class="fullscreen_bg"/>" line is wrong, you can't auto-close a div-element and Firefox treats it as a div wrapping all of the elements, hence it'll work fine in the snippet preview and fullscreen.

However, when using jade as a template engine, it automatically closes the div, leaving you an empty div. In that case all you get are the input fields, even when only using the html and css from this snippet + bootstrap css. However, if you put the .container inside of #fullscreen_bg, you get the same as in the snippet preview.

galaxyAbstractor () - 9 years ago - Reply 0