Full Page Log In With Background
<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 class="container">
<div class="row">
<div class="col-md-4 col-md-offset-7">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-lock"></span> Login</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">
Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">
Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"/>
Remember me
</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm">
Sign in</button>
<button type="reset" class="btn btn-default btn-sm">
Reset</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
Not Registred? <a href="http://www.jquery2dotnet.com">Register here</a></div>
</div>
</div>
</div>
</div>
body {
background: url(https://lorempixel.com/1920/1920/city/9/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.panel-default {
opacity: 0.9;
margin-top:30px;
}
.form-group.last { margin-bottom:0px; }
how can i link the background image in the css file in a different way than the url?,What do you mean?,can i call the background image using <img/> or some other way? Instead of url() ?,,it’s the same thing… you would specify the relative URL. Like this : url(“./images/bg.png”),this is not all the CSS cause the windows i have it on the left & with no backgroung & button style ?? :/,You need the Bootstrap 3 CSS from getboostrap.com,how did you get it so that it takes up the top half of the page and then something else (this comments section) sows up nicely below,I am using an iFrame to hold the snippet content, and the rest of the page is just Bootstrap,Hi, how can I centralize the form in the page?,Change <div class=”col-md-4 col-md-offset-7″> to <div class=”col-md-4 col-md-offset-4″>,wich rights we have on the background?,Thanks! :),The author is BhaumikPatel
Loading...
