Bootstrap 3 - Dynamic Load Images

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="responsiveBackgroundImage" id="myImage" ></div>



















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    About this SO Question:
    <a href='http://stackoverflow.com/q/25792575/1366033'>
        Prevent Bootstrap from preloading all the hidden-* images
    </a><br/>
    Fork This Skeleton Here: 
    <a href='http://jsfiddle.net/KyleMit/kcpma/'>
        Bootstrap 3 Skeleton
    </a><br/>
</div>

CSS

.responsiveBackgroundImage { 
    width:100%;
    background-size: 100%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}    

/* Extra small devices (phones, less than 768px) */
#myImage {
    background-image: url(http://placehold.it/768x150); 
    height: 150px;
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    #myImage { background-image: url(http://placehold.it/992x150); }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    #myImage { background-image: url(http://placehold.it/1200x150); }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    #myImage { background-image: url(http://placehold.it/2000x150); }
}