Tanmoy Sarkar Tanmoy Sarkar - 4 months ago 67
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

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.

Example

body{ font-family:"Arial"; color:#fff;}
.page-bg{
  background:url('http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg');
  -webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}
<h1>
This is a title
</h1>

<div class="page-bg">
</div>