Possibility to choose width 100% for responsive design?

[dantahoua]

The only problem I found is that when your resize the screen, the blured svg do not change size. Not a problem if you go from larger to smaller but the other way let a big empty space... I changed the width of the SVG to "100%" and it's better, even if the ratio is not good, at least it's not empty... Any idea there to keep the aspect ratio?

[codycurley]

+1

[enoversum]

+1!

[ericpoulinnz]

+1

[tadwohlrapp]

Here's a possible solution:

I added this to my index.html

// Get all heights on window load
// This is necessary to get the correct outerHeight values
// See: http://stackoverflow.com/a/21124648
$(window).load(function(){

// Calculate real height of the content  
  contentheight =
    $("header").outerHeight(true) +
    $("main").outerHeight(true) +
    $("footer").outerHeight(true);

// If calculated content height is smaller than the window
// set the container height to window height.
// Otherwise set it to match the content height 
    if (contentheight < $(window).height()) {
      $(".container").height($(window).height())
    } else {
      $(".container").height(contentheight)
    }

// background-blur.js
  $('.container').backgroundBlur({
    imageURL : 'images/bg2.jpg',
    blurAmount : 7,
    imageClass : 'bg-blur',
    overlayClass : 'bg-blur-overlay'
  });      
});

// Function on window resize
$(window).resize(function() {

// Compare the heights again, just like before
  if (contentheight < $(window).height()) {
    $(".container").height($(window).height())
  } else {
    $(".container").height(contentheight)
  }

// Small fix to get the "viewBox" attribute case sensitive
// See here: http://stackoverflow.com/a/22335908
  $.attrHooks['viewbox'] = {
    set: function(elem, value, name) {
      elem.setAttributeNS(null, 'viewBox', value + '');
      return value;
    }
  };

// Setting variables for dynamic width and height
  var dynamicwidth = $( ".container" ).width();
  var dynamicheight = $( ".container" ).height();

// Updating attributes
  $(".bg-blur").attr("width", dynamicwidth).attr("height", dynamicheight);
  $(".bg-blur").attr("viewBox", "0 0 " + dynamicwidth + " " + dynamicheight); 
});

Then I just updated my background-blur.js like this:

line 255: change preserveAspectRatio: 'none' to preserveAspectRatio: 'xMidYMid slice' line 271: change width: width, to width: '100%', line 272: change height: height, to height: '100%', line 276: change preserveAspectRatio: 'none' to preserveAspectRatio: 'xMidYMid slice'

I'm still learning Javascript, so the code may be a bit messy. But it get's the job done for me.

Tested in Chrome, Firefox and Edge

Working Demo here