blur.js trying to request "none" and div not expanding 100%

Question

I'm trying to use the http://blurjs.com/ to blur our the header bar's BG of the header image. However it gives me a interesting error I can't seem to track down. It may be something to do with the main code, and compatibility, but I'm not sure.

http://jordan.rave5.com/tmp/

Error is

Failed to load resource: the server responded with a status of 404 (Not Found) http://jordan.rave5.com/tmp/none

Also the background-gradient div is having trouble expanding 100% when the page is first initialing loading when the content box is small. I've tried adding a another div within it at 100% or bigger to push it out, but it just ends up pushing the footer further down when the content area expands. Kinda annoying.

Answer 1

Your code fails at line 285 of blurjs.js. This is because blurjs is looking for a css property on the element you pass in as the source (line 202). You are setting up .header-img (an image element) as the source option and so blurjs can't find a background-image property on it hence the default value of the css property is returned, none and so you get the error when you try to load an image with that value. Change blurjs.js at line 202:

var formattedSource;
if($source.is('img'))
    formattedSource = $source.attr('src');
else
    formattedSource = ($source.css('backgroundImage')).replace(/"/g, "").replace(/url\(|\)$/ig, "");