<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section id="login-bg"> <div id="login-bg-top"> <div class="logo-circle"></div> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>Hi, you need to login now!</h3> </div><!-- /.col-md-12 --> </div><!-- /.row --> </div><!-- /.container --> </div> <div class="container"> <div class="col-md-12"> <div class="bg-content"> <div class="input-group"> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <div class="input-group" style="margin-top: 10px"> <input type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon1"> </div> <div class="input-group" style="margin-top: 50px;"> <a href="#" class="btn btn-success btn-lg">LOGIN</a> </div> </div> </div> </div> </section>

#login-bg { min-height: 500px; background-color: #f5f5f5; } #login-bg-top { background-image: url('https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/7325VFAGUL.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; height: 130px; display: block; text-align: center; } #login-bg-top h3 { color: #101010; } .logo-circle { background-image: url('https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/KWFGTSNZBS.jpg'); background-repeat: no-repeat; background-size: cover; border-radius: 125px; width: 150px; height: 150px; margin-top: 50px; display: inline-block; border: 5px solid rgba(211,211,211,0.9); } .bg-content { text-align: center; padding-top: 50px; padding-left: 110px; padding-right: 110px; margin-top: 40px; margin-bottom: 90px; background-color: #FFF; min-height: 300px; } .input-group { width: 100%; }