How to blur a div?

Question

I'm using Vague.js to blur a div but I can't seem to get it working.

My JavaScript:

$(document).load(function() {
    var vague = $('.zero').Vague({
        intensity: 3,
        forceSVGUrl: false
    });

    vague.blur();
});

I've tried $(document).ready(...) first, that didn't work, so I switched to .load(..)

HTML:

<div class="block zero">
    <img src="images/rb.png" />
</div>

CSS:

.zero {
    background: url(../images/11.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

Make sure the permissions on the Vague.js are set to 755. Assuming a LAMP stack of course.

Answer 2

Try to use:

$(window).load(function() {

or:

$(document).ready(function() {

instead of:

$(document).load(function() {

Answer 3

Change $(document).load( to $(document).ready(

$(document).ready(function() {
    var vague = $('.zero').Vague({
        intensity: 3,
        forceSVGUrl: false
    });    
    vague.blur();
});

or use

$(window).load(function(){

or use Shorthand for $( document ).ready()

$(function(){