Can't blur CSS background

Question

I've set up a very simple HTML page with this CSS code associated with it:

html {
    background: url("photourl") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

However, it doesn't blur. I've taken a look at this example and tried doing it with a div tag instead but I don't quite see the reasoning here. Why wouldn't the code I posted work?

http://stackoverflow.com/questions/13168142/is-it-possible-to-use-webkit-filter-blur-on-background-image — sinisake, May 19 '16 at 18:29

G-Cyrillus · Accepted Answer · 2016-05-19T19:06:46.263

You need to use body to activate filter (also in Firefox) and set a background to HTML too so it is drawn by body wich is the tag that is suppose to hold all the visible content of your document.

When you set a background to body or HTML, it is drawn into HTML by default and filter won't activate in most browsers.Run the snippet below and hover it to unset html background and see what happens .

If you test on empty document, you also need to set an height to body, else it has none.

https://www.w3.org/TR/css3-background/#special-backgrounds

body {
  background: url("http://dummyimage.com/640x480") no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
       -o-filter: blur(5px);
          filter: blur(5px);
}
html {
  background: white;
}
/* see what happens when bg is not set also on HTML */
html:hover { 
  background:none;
}

score -1 · Answer 2 · answered May 19 '16 at 18:26

<!DOCTYPE html>
<html>
<head>
    <title>Stack </title>
    <style>
    div {
        height:500px;
        width: 100%;
    background: url("https://udemy-images.udemy.com/course/750x422/394968_538b_5.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
    </style>
</head>
<body>
<div>

</div>
Some Text
</body>
</html>

I tried this and its working fine.

Can't blur CSS background

2 Answers2