How can I blur the part of an image behind a specific DIV. I am currently using bgStretcher JQuery plugin to stretch a large imaeg across the browser window, so when it is resized the image will stretch to fit.
The plugin creates the following HTML:
<div id="bgstretcher" class="bgstretcher" style="width: 1920px; height: 534px;">
<ul>
<li class="bgs-current" style="display: list-item;">
<img src="images/backgrounds/bg-2.jpg" alt="" style="width: 1920px; height: 1280px;">
</li>
</ul>
</div>
I have a div with position absolute that floats on top of the bgstretcher DIV and has content in it. I want the part of the image behind this DIV to be blurred out in some degree so elements within this div sill be more readable.
I want to the blur to get updated and be consistent when I resize the browser window. I tried Blur.js with the following code but it doesn't work:
$('.blur').blurjs({
source: '.bgstretcher img',
radius: 7,
overlay: 'rgba(255,255,255,0.4)'
});
I want this solution to work with at least IE 8+, Chrome, Safari and Firefox. I'm searching for something that is easy to implement, in form of a plugin. I prefer the option to still use Blur.js but I want to make it work with bgStretcher.
