jQuery should blur fullscreen background image [du

Question

This question already has an answer here:

• Gaussian Blur onHover Using jQuery 4 answers

Hej! I need some jQuery that blurs my fullscreen background image 1000px in the middle (so: margin: 0 auto; width: 1000px;).

Here's an example: http://imageshack.us/a/img443/4976/j7qj.jpg

I know that this is less a question - but I need some help, because my jQuery (or JS) knowledge is less than basic. Anyway, I hope someone can help me.

I'm using this for my fullscreen background image: bg { left: 0; min-height: 100%; min-width: 100%; position: fixed; top: 0; z-index: -1; }

Answer 1

You can use SVG filters, along with the webkit property, as well as a IE-specific filter for older versions of IE. Basically combine the powers of CSS3 + SVG filters. Yay!

Example: http://jsfiddle.net/3asZC/4/

CSS

#css-filter-blur { margin: 20px; }
#css-filter-blur:hover { 
    -webkit-filter: blur(2px); 
    filter: url(#blur-effect-1);
}

.lt-ie9 #css-filter-blur:hover {
    filter: progid:DXImageTransform.Microsoft.Blur(Strength=2);
    position: relative;
    left: -2px;
    top: -2px;
    }

HTML

<!--[if lt IE 7]> <div class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <div class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <div class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <div class="no-js"> <!--<![endif]-->
<img id="css-filter-blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" alt="Blur" height="200" width="300" />

<svg id="svg-image-blur">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

</div>

For a center element, write a container that should look something like this:

#blurred {
  max-width: 1000px;
  width: 100%;
  background-position: top center;
  background-image: url; 
  height: auto;
  margin: 0 auto;
 }

Finally, you may want to consider using this polyfill for the best possible browser support.