magic code

demo

<div class="responsive-background" data-src="intro/introslide2.jpg"></div>

<script>
	var resizeTimer;
	var resizing = false;
	var startWidth = 0;
	var loadedImages = [];
	var maxWidth = window.innerWidth;
	
	$(window).on('resize', function(e) {
		resizing = true;
	
		if(!resizing) {
			startWidth = window.innerWidth;
		}
	
	  	clearTimeout(resizeTimer);
	  	resizeTimer = setTimeout(function() {
	  		resizing = false;	
	
	  		if(maxWidth < window.innerWidth) {
	    			adjustBackgroundImage();
	    			maxWidth = window.innerWidth;
	    		}
	  	}, 250);
	});
	
	function adjustBackgroundImage() {
		$.cloudinary.config({ cloud_name: 'www-bungalowcph-com'})
		$('.responsive-background').each(function() {
			var self = this;
			var image = $(this).attr('data-src');
			var w = $(this).outerWidth();
			var h = $(this).outerHeight();
			var url = jQuery.cloudinary.url(image, { width: w, height: h, crop: 'fill' });
	
			loadedImages[url] = new Image();
			loadedImages[url].src = url;
			loadedImages[url].onload = function() {
				$(self).css('background-image', 'url("' + url + '")');
			};
		});
	}
</script>