<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 ----------> <div class="container"> <div class="row"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Background image's with responsive utilities</h3> </div> <div class="panel-body"> <p>Make your background image's file size smaller for small screens. This example loads 3x faster on mobile.</p> <p><small> Ref: <a href="http://getbootstrap.com/css/#responsive-utilities" target="_blank">Bootstrap's Responsive Utilities</a> --- <a href="http://msurguy.github.io/triangles/" target="_blank">Triangle Generator</a> </small></p> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <a class="pull-right" href="http://bootsnipp.com/iframe/80qDZ" target="_blank">full screen</a> <hr> <div class="visible-lg myBack-lg"> <h1>visible-lg</h1> <p class="text-center btn-danger"> Large devices Desktops (≥1200px) - background image size = 133Kb </p> </div> <div class="visible-md myBack-md"> <h1>visible-md</h1> <p class="text-center btn-warning"> Medium devices Desktops (≥992px) - background image size = 122Kb </p> </div> <div class="visible-sm myBack-sm"> <h1>visible-sm</h1> <p class="text-center btn-info"> Small devices Tablets ( (≥768px)) - background image size = 93Kb </p> </div> <div class="visible-xs myBack-xs"> <h1>visible-xs</h1> <p class="text-center btn-success"> Extra small devices Phones (<768px) - background image size = 48Kb </p> </div> <!-- / col-md-12 --> </div> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2F80qDZ" class="pull-right" target="_blank"> <small>HTML</small>⁵ </a> </p> <!-- /row --> </div> <!-- /container --> </div>

.container { margin-top: 15px; } .myBack-lg { background-image:url(http://i.imgur.com/KRStJ9m.png); background-size:1200px 300px; height:200px; background-repeat:no-repeat; color:#555; padding:20px } .myBack-md { background-image:url(http://i.imgur.com/azV93IL.png); background-size:1000px 250px; height:180px; background-repeat:no-repeat; color:#555; padding:15px } .myBack-sm { background-image:url(http://i.imgur.com/ltN41AF.png); background-size:800px 200px; height:175px; background-repeat:no-repeat; color:#555; padding:10px } .myBack-xs { background-image:url(http://i.imgur.com/4eZgZYG.png); background-size:500px 125px; height:125px; background-repeat:no-repeat; color:#555; padding:5px }