Why is blur.js trying to access the file "none"?

html, javascript, jquery, transparency

Solution

It's a bug in the plugin, it assumes that the element you pass to the plugin has a valid URL as a source.

That could be a reasonable assumption but it doesn't handle the situation where there is no background image in the source element, that's when the browser reports `"none"`.

You should probably report it if you care about the plugin because it is undesired and useless load on the server.

Anyway, you should also use the plugin correctly, what you want is:

source: '#page'

However, the source image must be hosted by you, not `onlinedesign4uu.co.uk` because cross-origin image will not work.

Problem

I'm trying to use blur.js to create a blur effect on my site so you can see the site background behind the content. However, it appears to be trying to access an image called "none." Here is the output from the chrome javascript log: ``` $('#container').blurjs({source: 'body',radius: 10}); [ <div id=​"container">​… ] GET http://rymate.x10.mx/test/none 404 (Not Found) blur.min.js:285 (anonymous function) blur.min.js:285 jQuery.extend.each jquery-1.7.1.js:658 jQuery.fn.jQuery.each jquery-1.7.1.js:271 $.fn.blurjs blur.min.js:199 (anonymous function) InjectedScript._evaluateOn InjectedScript._evaluateAndWrap InjectedScript.evaluate ``` My code is online at https://gist.github.com/rymate1234/6162990 and also on http://rymate.x10.mx/test/. Any help will be appreciated.

Original source