How to blur background image in html.

Question

https://code.sololearn.com/WArPSrzWQ8F2/?ref=app

Answer 1

Koli

https://code.sololearn.com/WICjvD9RPUof/?ref=app

Answer 2

You should be able to filter
And blur inside the css as

filter: blur(2px);
  -webkit-filter: blur(2px);

But it doesn't seem to be working

Answer 3

Thank for your suggestion. 👌

Answer 4

Thanks you all for give me suggestion. 🥲🥲

Answer 5

Koli will this work for you ?
<img src="http://www.sololearn.com/uploads/slider/1.jpg" class="blured">

.blured {
-webkit-filter:blur(2px);
}

Answer 6

It's a simple image but I want to blur background image. Like the link above in the question can I blur it.

Answer 7

Koli try taking a simple image element and using it as a background by positioning it under rest of elements. This way:

https://code.sololearn.com/Ww2LwlXw1Iwt/?ref=app

Answer 8

Dian Lerry Gabatin Lizardo (Dian) if you apply the filter blur property to an element you won't set it just for that element, but for all it's content, so won't be just background that gets blurred but all content and element inside and it will be unreadable. Maybe, did you used IA to find that answer?

Answer 9

Try this in your CSS, it will make your background blured:
filter: blur(8px);
-webkit-filter: blur(8px);

Let me know if it worked or not.

Answer 10

Hi