<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 ----------> <!-- Submitted to Feature March 2, 2014 11:20pm --> <div class="container"> <div class="row"> <h2>Responsive Background Images</h2> <p> <a href="http://bootsnipp.com/iframe/x95Q" class="btn btn-lg btn-success" target="_blank"><span class="glyphicon glyphicon-fullscreen"></span> Full screen</a> </p> <p> <br><br> <a href="http://validator.w3.org/check?uri=http://bootsnipp.com/iframe/x95Q&ss=1"> <span class="glyphicon glyphicon-check green"></span> HTML⁵</a> </p> </div> </div>

/* Thanks to: http://css-tricks.com/perfect-full-page-background-image Photo: http://www.publicdomainpictures.net/view-image.php?image=44399 */ body { background: url('http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .container{ padding: 25px; }