blur without background image

Question

I creating theme (for me) for Cinnamon and i want to get blur effect on cinnamon panel, but i don't know how to do that. I know how to get blur on this:

.moreblur {
    position: fixed;
  left: 0;
  right: 0;
  z-index: 1;

  display: block;
  background-image: url(http://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-valley-winter-1366x768.jpg);
  width: 1200px;
  height: 800px;

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

<div class="moreblur"></div>

But remember: i need to get blur on background image, not myself image. Thanks.

You need to show us the code of what you have...not on what you don't have. — Paulie_D, Aug 12 '16 at 11:59
Duplicate - http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image — Paulie_D, Aug 12 '16 at 12:00
@Paulie_D No, thats isn't duplicate. In him question he ask how to get blur on fixed image. Code? Whats to show, if my code haven't anything interesting for anybody, cause i'm decorate cinnamon, not my web page. — JakiHappyCity, Aug 14 '16 at 08:19

score 0 · Accepted Answer · answered Aug 12 '16 at 12:05

if you cannot change your HTML structure to add a new div to which to add the background-image and the blur . you could use a pseudo-element like :before

see below snippet

.moreblur {
  position: fixed;
  width: 1200px;
  height: 800px;
}

.moreblur:before {
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url(http://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-valley-winter-1366x768.jpg);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  position: fixed;
  width:100%;
  height:100%;
  content:"";
  z-index:-1;
}

<div class="moreblur">
  <p>
  I am NOT Blured
  </p>
   <p>
  I am NOT Blured
  </p>
   <p>
  I am NOT Blured
  </p>
  
</div>

let me know if it helps

blur without background image

1 Answers1