"Tall Footer With Gradient Image"
Bootstrap 3.1.0 Snippet by Aix77

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 well"> <h2><center>Web Stuff Goes Here</center></h2> </div> <div id="footer"> <div class="container"> <div class="row"> <h3 class="footertext">About Us:</h3> <br> <div class="col-md-4"> <center> <img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains"> <br> <h4 class="footertext">Programmer</h4> <p class="footertext">You can thank all the crazy programming here to this guy.<br> </center> </div> <div class="col-md-4"> <center> <img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="..."> <br> <h4 class="footertext">Artist</h4> <p class="footertext">All the images here are hand drawn by this man.<br> </center> </div> <div class="col-md-4"> <center> <img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="..."> <br> <h4 class="footertext">Designer</h4> <p class="footertext">This pretty site and the copy it holds are all thanks to this guy.<br> </center> </div> </div> <div class="row"> <p><center><a href="#">Contact Stuff Here</a> <p class="footertext">Copyright 2014</p></center></p> </div> </div> </div>
/* Footer styles -------------------------------------------------- */ html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } #footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 280px; background: /* color overlay */ linear-gradient( rgba(240, 212, 0, 0.45), rgba(0, 0, 0, 0.45) ), /* image to overlay */ url(http://images.cdn.fotopedia.com/_avPIZmqM3w-7z161LH_268-hd.jpg); } /* Custom footer CSS -------------------------------------------------- */ .container { width: auto; max-width: 680px; padding: 0 15px; } .container .text-muted { margin: 20px 0; } .footertext { color: #ffffff; }

Related: See More


Questions / Comments: