CSS blur on background image but not on content

background-image, blur, css

Solution

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;
}

Problem

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?

Original source

Related problems