Create a blurry effect.

blur-background.css

*[data-blur-background] {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
*[data-blur-background]::before, *[data-blur-background]::after {
  position: absolute;
  display: block;
  z-index: -1;
  content: ' ';
}
*[data-blur-background]::before {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
*[data-blur-background]::after {
  background: rgba(255, 255, 255, .5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

blur-background.js

jQuery(document).ready(function ($) {
  'use strict';
  $('[data-blur-background]').each(function (i, content) {
    var source = $(content).addClass('blur-id-' + i).data('blur-background'),
      $style = $('<style>').appendTo('head'),
      blur = function () {
        var top = $(source).offset().top - $(content).offset().top,
          left = $(source).offset().left - $(content).offset().left,
          css = '.blur-id-' + i + '::before { width: ' + $(source).css('width') + '; height: ' + $(source).css('height') + '; background: ' + $(source).css('background') + '; top: ' + top + 'px; left: ' + left + 'px; }';
        $style.text(css);
      };
    blur();
    $(window).resize(blur);
  });
});

<div data-blur-background="#my-background-container">