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
Post a Comment