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

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

<body>        
<div ></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.

CodePudding user response：

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 ></div>
  </body>
</html>

CodePudding user response：

.fondoIndex {
  width: 200px;
  height: 100px;
  background-image: url("https://media.istockphoto.com/photos/beautiful-artistic-image-of-environment-nature-in-spring-or-summer-picture-id1314315360?b=1&k=20&m=1314315360&s=170667a&w=0&h=vZ7ZKu_qL1b0MSNQyC7ru9u9jwY4JcMPvdZP1Imh3K8=");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);
}

body {
  background-color: red;
}

<!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 ></div>
</body>

</html>