CODEWITHSUNDEEP
htmlcss
mati
mati

Reputation: 97

CSS Blur effect does not work

I am trying to use blur filter in my website but it doesn't work. I don't know how to fix it.

#main {
    height: 100vh;
    background-image: url("tlo.jpg");
    filter: blur(10px);
    background-size: cover;
    position: absolute;
    width: 100%;
}

Upvotes: 1

Views: 3940

Answers (2)

Akash
Akash

Reputation: 377

Try using vendor prefixes as they are not supported directly

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

try using vendor prefixes:

#main {
height:100vh;
background-image: url("tlo.jpg");
-moz-filter:blur(10px);
-o-filter:blur(10px);
-webkit-filter:blur(10px);
filter:blur(10px);
background-size: cover;
position:absolute;
width:100%;
}

Upvotes: 1

Related Questions