Creating a Web Page that Actively Blurs an Image

[Satlen]

Hello everyone, Let me first start off by saying I am not well in HTML and CSS.  I am trying to make a web page for a friend that basically displays an image and then blurs the image.  

 

Here is something that I would want but I want the whole image to be blurred and I need it to always to be blurred. not just when hovering. http://jsfiddle.net/SvH6w/6/

 

I would also like to display the image at its native size.  This page would just need to be opened from an html file.

 

Any help would be appreciated.

[loganryan99]

http://jsfiddle.net/VuBz2/1/

 

Just removed the two :hover selectors in the CSS.

[fizzlesticks]

Nothing happens in either of those for the newest version of FF.

[thefishmafia]

in "#color" you can change the "height" variable to 200px to cover the whole image

[Satlen]

Ok, I got everything set up they way I want it, now how would I do this if I had the css and html files on my computer? Do I just throw them inside the same folder?  How do I reference the CSS style and effect so that it shows up in the html page?

 

Never mind guys, thank you all for the help, I got it figured out