Responsive Background Image With Login Form Using Bootstrap
In this tutorial we are going to see how to design a responsive background image with login form using bootstrap. I going to explain how I designed the responsive login form for my smart invoice system using PHP MySQL jQuery and Bootstrap.
Also if you are interested check my smart invoice system tutorial and demo
Create index.html file and add basic html markup in it.
Create a directory called responsive-login in your htdocs or in your server root folder. Now add create following list of folders (css, js and images) in the responsive-login directory. Then download bootstrap and jQuery files and add in their respective css and js directories. Now create index.html file and include those css and js files in index.html file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Responsive Login Page</title> <!-- Bootstrap --> <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="css/style.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Set Responsive Background Image To Body
Keep background image in img folder, and now set background image to body tag using css background-image property. This set background image to your html page.
body{
background: url(../images/bg2.JPG) no-repeat center center fixed;
}
Set Responsive Background Image Using background-size:cover CSS Property:
Now we need to make that image to responsive based on the user screen size or viewport size. Here where css background-size: cover; property does trick to make background image responsive based on the viewport or screen size. This background-size: cover; property automatically resizes background based on the viewport or screen size.
body{
background: url(../images/bg2.JPG) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #fff;
}
Design Responsive Login Form Using Bootstrap.
Now we are going to design the responsive login form using bootstrap Gird and css media query. Just copy and paste following html markup in your index.html <body> tag.
<div class="container"> <div class="login-form"> <h1 class="title text-center">Welcome</h1> <form id="login-form" method="post" class="form-signin" role="form"> <input name="email" id="email" type="email" class="form-control"placeholder="Email address" autofocus> <input name="password" id="password" type="password" class="form-control disable" placeholder="Password"> <button class="btn btn-block bt-login" type="submit">Sign In</button> </form> <div class="form-footer"> <div class="row"> <div class="col-xs-7 col-sm-7 col-md-7"> <i class="fa fa-lock"></i> <a href="#"> Forgot password? </a> </div> <div class="col-xs-5 col-sm-5 col-md-5"> <i class="fa fa-check"></i> <a href="#"> Sign Up </a> </div> </div> </div> </div> </div>
Responsive Login Form CSS:
Now copy following css styles in your style.css. I had used different background images for different sizes of the screen that improves page speed, because it will load less sized image for small screen and large size image for big screen.
body{
background: url(../images/bg2.JPG) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #fff;
}
p{
color:#fff;
}
.login-form {
background: url("../images/bgt.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
width:380px;
margin: 15% auto;
padding: 20px;
}
.title{font-family: Pacifico;text-decoration: underline;}
.form-footer {
padding: 15px 40px;
}
.bt-login{
background-color: #ff8627;
color: #ffffff;
padding-bottom: 10px;
padding-top: 10px;
transition: background-color 300ms linear 0s;
}
.form-signin .form-control{
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus{
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 30px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
i{margin-right: 4%;color:#555555}
a{text-decoration: none;color:#555555;}
Following media query css sets the different background images for different sizes of the screen.
@media (min-width: 320px) and (max-width: 350px) {
.login-form{
width: 280px !important;
}
}
@media (min-width: 350px) and (max-width: 500px) {
.login-form{
width: 300px !important;
}
}
@media (min-width: 320px) and (max-width: 1023px) {
body{
background: url(../images/small-bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #fff;
}
}
@media (min-width: 1024px) and (max-width: 1360px) {
body{
background: url(../images/medium-bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #fff;
}
}
@media (min-width: 1361px) and (max-width: 1960px) {
body{
background: url(../images/bg2000.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #fff;
}
}
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
