Responsive background cover images with Cloudinary & jQuery, fetched on the fly

cloudinary_reponsive_background_cover_img

HTML:

<header id="js-cover" class="cover">  

  <!-- Optionally specify image width stoppoints to reduce the maximum possible no of transforms per image -->
  <!-- The appropriate image resolution will automatically be loaded -->
  <img 
    data-stoppoints="480,768,1200" 
    data-src="http://res.cloudinary.com/<your account name>/image/fetch/w_auto,dpr_auto/http://<your full img url>" 
    class="cld-responsive cover-img" id="js-cover-img">
	
  <h1>Perfectly centered!</h1>

</header>


CSS:

.cover {
  min-height: 300px;
  height: 100vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center center;
  background-attachment:scroll;
  overflow: hidden;
}

/* you could alternatively use a loading sprite here and hide on first load */
.cover-img {
  display: none;
}

JS:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>window.jQuery || document.write('<script src="/_assets/js/jquery-1.11.2.min.js"><\/script>')</script>

 <!-- Cloudinary -->
<script src="https://rawgit.com/cloudinary/cloudinary_js/master/js/jquery.cloudinary.js"></script>

<script>
$(function() {
    $.cloudinary.config({ cloud_name: '<your account name>', api_key: '<your api key>'})

    $.cloudinary.responsive({
    	type : 'fetch',
	responsive_use_stoppoints : true
    });

    $("#js-cover-img").load(function(){
	$("#js-cover").css('backgroundImage', 'url('+$("#js-cover-img").attr('src')+')');
    });
});
</script>

Actually this is intentional. Cloudinary will upload a remote image on the fly:

data-src="http://res.cloudinary.com/<your account name>/image/fetch/w_auto,dpr_auto/http://www.your-website/your-image.jpg"

You need the account name and key for uploads :)

Thanks for the gist, though I don't believe this works well for narrow screens (e.g., mobile).

The resolution of the image is calculated with the width of the screen, making it very low res on a narrow device (where the height is much greater in proportion to the width, and the image is forced to zoom in a lot).

For an example of what I mean, you can clone this repo, open index.html, make the browser screen narrow, and refresh.

Here's what happens:

True, what I often do is set the containing div to maintain a specific aspect ratio, combined with a <picture> element if that aspect ratio should change at different breakpoints.

I'm not exactly sure what you mean. Are you saying that a <picture> element can be used to compensate for aspect ratios that have a greater height than width? If so, could you please elaborate (or even better, submit a pull request to my repo above?)