When I try to blur the bg image, the entire body gets blurred :s

Im trying to put a blurred background image as it follows in html

<body>        
<div class="fondoIndex"></div>
</body>

And then with css

.fondoIndex {
    background-image: url("images/bg3.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(5px);    
}

But it does not make any effect. No background is shown. If I remove the close /div tag, the background image is shown and blurred, but so it is with the entire body. :S

Thank you all.

Solution

You only have to specify the height and width of the element.

Explanation

As the div element is empty, by default its height value is auto so it'll take the height of the content. By adding the CSS rule forcing the element to have the required height and width it will show the background image as it have a height and width greater than 0.

.fondoIndex {
  width: 400px;
  height: 400px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/96/Barbados_beach.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  </head>
  <body>
    <div class="fondoIndex"></div>
  </body>
</html>