<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="background" data-image="WpdHCafYSWjaguKSxPOjdbT1a/H0MfAAAAEElEQVQI12NgYGRiYGZhBQAALgAQ2bAGGQ"><img class="lazy" src="https://lh3.googleusercontent.com/-6UtNFOzr6Rk/V2pO8a32QNI/AAAAAAAAHXE/tc8SACAEqWo_IM0N85rUHlc-ThVs65LaQ/w2048-h1280/sierra-2.jpg"/></div> <div class="background" data-image="WeXlGlt8u7wc40QUtIYHNRR0wrG7TZAAAAEElEQVQI12NgYGRiYGZhBQAALgAQ2bAGGQ"><img class="lazy" src="http://ihdwallpapers.com/walls/2015/10/12/os_x_el_capitan_desktop-wide.jpg"/></div> <div class="background" data-image="X2xZnCkYJ4YXKqj3xTUVpKT15VjEr+AAAAEElEQVQI12NgYGRiYGZhBQAALgAQ2bAGGQ"><img class="lazy" src="https://www.hdwallpapers.net/wallpapers/yosemite-wallpaper-for-2880x1800-60-798.jpg"/></div>

.background { width: 80vmin; height: calc(80vmin / 14 * 9); margin: 56px auto; box-shadow: 0 10px 75px -16px #000; } .background img.lazy { height: 100%; width: 100%; opacity: 0; transition: 1s; } .background img.lazy.loaded { opacity: 1; }

$('.background').each(function() { var $b64 = $(this).data("image"); $(this).css("background", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAMAAACqqpYoAAAAElBMVE" + $b64 + "AAAABJRU5ErkJggg==) center/cover no-repeat"); }); $('.lazy').each(function() { var $object = $(this), $parent = $object.parent(); $object.on('load', function() { $object.addClass('loaded'); $parent.removeAttr("data-image") setTimeout(function() { $parent.removeAttr("style"); }, 2000); }); });