Apply on css background image?

[dantahoua]

Is it possible to use background-blur to blur the background image of a div? This background image is specified in the CSS or in the inline style... So do we need absolutely to use imageURL in the javascript?

[msurguy]

Hello! Could you please explain the use case a little bit more? I might look into basically taking an element's background image if it is present and using that URL instead of imageURL but as far as I know using relative URLs (that are often used in CSS) could present some problems for loading SVG render.

[dantahoua]

Yes, you're right about the relative URL. In my case it's inline and an absolute URL as it is generated by Worpress. Exemple: <div id="Header" class="blur" style="background-image: url(http://test.com/...../test.jpg);"></div>

[dantahoua]

I just though about something: we could add a data-imgurl="URL to image" in the html markup and grab that in your code... Would be great! <div id="Header" class="blur" data-imgurl="http://....."></div> and in the javascript: imageURL = $(this).data('imgurl');

[atinux]

:+1:

Nice job on your plugin!

Something like that could be nice:

<div class="blur" data-image-url="http://..."></div>

And for the JS:

$('#header').backgroundBlur();

So every option can be used in the HTML too :)

[enoversum]

+1 . Having it being applied onto a background image would solve problems with background-size: cover and the likes I suppose.

[yanhao-li]

@dantahoua could it really work? in this case, $(this) should returns the window instead of the object. in other word, it seems that it can not fetch the data-imgurl from DOM