htmlで背景画像だけを全体的にぼかす
htmlで背景画像だけを全体的にぼかすにはどうすればいいのでしょうか?
filterのblurを使うことはわかるのですが、下のcssのようにbodyの中に
filter: blur(5px);
と書くと、body内のすべての要素にblurがかかってしまいます。
背景画像だけにblurをしたいのですがどうすればいいのでしょうか?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="div1" style="width: 400px; height=800px">DIV1</div>
</body>
</html>
body {
background-image: url('background.jpg');
background-attachment: fixed;
filter: blur(5px);
}