"Responsive Background Images"
Bootstrap 3.1.0 Snippet by mrmccormack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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<sup>5</sup></a>
</p>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: