blur.js próbuje zażądać "none", a div nie rozwija się w 100%

Question

Próbuję użyć http://blurjs.com/, aby zamazać naszą BG BG nagłówka obrazu. Jednak daje mi ciekawy błąd, którego nie potrafię wyśledzić. Może to mieć coś wspólnego z głównym kodem i kompatybilnością, ale nie jestem pewien.

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

Błąd jest

Nie udało się załadować zasób: serwer odpowiedział ze statusem 404 (nie znaleziono) http://jordan.rave5.com/tmp/none

Również div tła gradient kłopoty rozwijanie w 100%, gdy strona inicjuje ładowanie, gdy zawartość jest mała. Próbowałem dodać inny element div w 100% lub większym, aby go wypchnąć, ale po prostu kończy się przesuwanie stopki w dół, gdy obszar zawartości rozszerza się. Trochę irytujące.

Answer 1

Twój kod kończy się niepowodzeniem w linii 285 pliku blurjs.js. Wynika to z tego, że funkcja blurjs szuka właściwości css na elemencie, który przekazujesz jako source (wiersz 202). Konfigurujesz .header-img (element obrazu) jako opcję źródłową, dzięki czemu program blurjs nie może znaleźć na nim właściwości background-image, dlatego zwracana jest domyślna wartość właściwości css, none, co powoduje pojawienie się błędu podczas próby załadowania obraz o tej wartości. Zmień blurjs.js w linii 202:

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