I am working on creating a unique design using CSS and Bootstrap that involves adding a background image and placing "Login" and "Register" buttons on top of that image. Here is the current code I have:
<!-- Starting point for Header -->
<header id="section_header" class="navbar-fixed-top main-nav" role="banner">
<div class="container">
<div class="row">
<div class="navbar-header ">
<a class="navbar-brand" href="index.html">
<img src="images/logo.jpg" alt="">
</a>
</div><!-- End of Navbar header -->
<!--==== Beginning of Navbar Collapse==-->
</div><!-- End of row -->
</div> <!-- End of container -->
</header> <!-- Ending of header -->
Below you can find the code for the background image alongside the login and register buttons:
<div style="background-image:url('images/loginbg.jpg');padding-bottom:30%;background-size:cover;" class="wrapper">
<div id="homebuttons" class="container">
<!-- Login button -->
<button style="top:170px; width:25%;" type="button" class="btn btn-info btn-lg sharp pull-right btn-group-vertical" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SVAPP</button><br>
<!-- Register button -->
<br><br><a href="register.html" style="top:200px; width=25%" type="button" class="btn btn-info btn-lg sharp pull-right btn-group-vertical"><span class="glyphicon glyphicon-lock"></span> | Register with SVAPP</a>
</div><!-- End of buttons container -->
</div> <!-- End of Background image -->