htmlで背景画像だけを全体的にぼかす


htmlで背景画像だけを全体的にぼかすにはどうすればいいのでしょうか?  
filterのblurを使うことはわかるのですが、下のcssのようにbodyの中に  
`filter: blur(5px);`と書くと、body内のすべての要素にblurがかかってしまいます。  
背景画像だけにblurをしたいのですがどうすればいいのでしょうか?

[code]

    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <div id="div1" style="width: 400px; height=800px">DIV1</div>
        </body>
    </html>
    
    
[/code]

[code]

    body {
        background-image: url('background.jpg');
        background-attachment: fixed;
        filter: blur(5px);
    }
    
[/code]




[How to apply a CSS 3 blur filter to a background
image](https://stackoverflow.com/q/20039765/813612)

によると `body:before` のほうに `background-image` と `filter` を加えて `content: ""`
を設定するという方法が提案されています。具体例は [こちら](http://codepen.io/akademy/pen/FlkzB) を参照してください。




[How to apply a CSS 3 blur filter to a background
image](https://stackoverflow.com/q/20039765/813612)

によると `body:before` のほうに `background-image` と `filter` を加えて `content: ""`
を設定するという方法が提案されています。具体例は [こちら](http://codepen.io/akademy/pen/FlkzB) を参照してください。

