CSS blur on background image but not on content

Question

I did this example.

I'm trying to blur the background image, but the main content is blurred too (the <span>)

How can I blur the background without blurring the content?

Answer 1

You could overlay one element above the blurred element like so

DEMO

div {
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}