Tanmoy Sarkar Tanmoy Sarkar - 1 year ago 204
HTML Question

how to blur the background image only in css

Hi i am trying to blur the background image but i think its lacking in doing so. Any help over it will boost my energy for it. Thanks

This my CSS

html {
position: relative;
min-height: 100%;
max-width: 100%;
background: url(img/rsz_1spring.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width: 100%;
overflow-x: hidden;


I am trying to apply this but it blur all my webpage instaed of background image only.

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

Thank you.

Answer Source

If you are applying blur to <html> then it will blur your webpage.

Instead of adding background to <html> You need to create another <div> with in <body> with size to that of webpage and add blur to it.


body{ font-family:"Arial"; color:#fff;}
  -webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
This is a title

<div class="page-bg">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download