how to blur the background image only in css

Question

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.

@TanmoySarkar Check the link in the comment above, and tell us if the solution they have suits your needs. — RDardelet, Jul 14 '16 at 06:09
@RDardelet i am trying to solve this with that link .. lets see. — Tammy, Jul 14 '16 at 06:10

score 17 · Accepted Answer · edited Apr 13 '17 at 20:16

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>

@tympazz thank you so much this is awesome... this solves my doubt thank you. — Tammy, Jul 14 '16 at 06:22

score 1 · Answer 2 · answered Jul 14 '16 at 06:14

Assign id or class attribute to image tag or div containing image then assign css property to that particular image tag or div containing image. You are blurring for whole html that will obviously blur whole webpage.

For eg:

<div class="image-container"><img class="blurred" src="..." /></div>

either you blur to image-container or to image directly like or image of div

.image-container, .blurred, .image-container>img {
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);
}

Thank you everyone for you kind hearted help.. this solves my doubt and query also.. thank you @everyone .:) — Tammy, Jul 14 '16 at 06:22

how to blur the background image only in css

2 Answers2

Linked

Related