css3 - Blur Part of the Image Background Behind a DIV with bgStretcher using JQuery -


how can blur part of image behind specific div. using bgstretcher jquery plugin stretch large imaeg across browser window, when resized image stretch fit.

the plugin creates 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 div position absolute floats on top of bgstretcher div , has content in it. want part of image behind div blurred out in degree elements within div sill more readable.

i want blur updated , consistent when resize browser window. tried blur.js following code doesn't work:

$('.blur').blurjs({     source: '.bgstretcher img',     radius: 7,     overlay: 'rgba(255,255,255,0.4)' }); 

i want solution work @ least ie 8+, chrome, safari , firefox. i'm searching easy implement, in form of plugin. prefer option still use blur.js want make work bgstretcher.


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -