[ANSWERED] html – When I try to blur the bg image, the entire body gets blurred :s

Question 1

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>

Question 2

.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 class="fondoIndex"></div>
</body>

</html>

Question 3

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.

Bollate

[ANSWERED] html – When I try to blur the bg image, the entire body gets blurred :s

By

Solution 1 :

Explanation

Solution 2 :

Problem :

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate