0

I know this question has been asked numerous times, but my questions is kinda different since I have created a box that is blurred. But my question focuses on the background image of the blurred box.

So basically, I have the following blurred box. An I will use it in a plugin. DEMO

In order to make this box blurred, .dany:before must have the same background as the parents' backgrounds. But since this is the skin of a plugin, I cannot predict what background its parents will have. So I am looking in a way that can find its parent background or backgrounds and set it as the background of the plugin so the blurred effect can work.

I don't mind JavaScript or jQuery but it is really important that it will work in any case.

Any idea how to achieve this? 

body,
.dany:before {
  background: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg)
}
.dany {
  width: 600px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  background: rgba(230, 240, 255, 0.4);
}
.dany:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
}
<div class="dany">TEXT</div>
Irfan Anwar
  • 1,878
  • 17
  • 30
DannyBoy
  • 434
  • 5
  • 21
  • You don't mind Java? Neither do I, but it's complicating your scenario just a tiny bit. – roberrrt-s Sep 05 '16 at 16:41
  • 1
    Sorry that was a typo, i meant jQuery. @Roberrrt – DannyBoy Sep 05 '16 at 16:47
  • I don't know if this is what you're looking for, but can't you just **inherit** the background? – ifvictr Sep 05 '16 at 16:53
  • Yes inherit is the right word for it. But it seems like `background: inherit` does not work in this case. @ifvictr – DannyBoy Sep 05 '16 at 17:16
  • can you post output image, because I cannot understand your question exactly? – Irfan Anwar Sep 05 '16 at 17:23
  • @DannyBoy It _should_ work... You want to make sure that if a parent of `dany` has a background/background-color, that `dany` will also have all of those? If so, you should inherit `background`, `background-color`, and `background-image`. – ifvictr Sep 05 '16 at 17:30
  • @ifvictr yes thats exactly right, but the property does not work. [Link](https://jsfiddle.net/danials/b6t4b26h/2/) – DannyBoy Sep 05 '16 at 17:38
  • What do you mean "does not work"? Does it straight-up give you an error, or is it silently ignored? Mind editing your post to show the code you've used? – ifvictr Sep 05 '16 at 17:41
  • @ifvictr the effect does not apply after i gave the `inherit` value to `background` of `dany:before`. I believe it is because the parent of `dany:before` is `dany` which has a white background. Therefore, the effect is either not visible or not applying. – DannyBoy Sep 05 '16 at 17:49
  • Have you tried inheriting from a parent inside of `dany`, not `dany:before`? And also, if you're having trouble with properties being overridden by parents, use `!important`. – ifvictr Sep 05 '16 at 17:54
  • @ifvictr Thanks but having inherit background for `dany` removes the whole blur effect. – DannyBoy Sep 05 '16 at 17:59
  • Wait, I think I missed something. Can you clarify what you meant by "So I am looking in a way that can find its parent background or backgrounds and set it as the background of the plugin so the blurred effect can work."? Doesn't the blurred effect already work without finding the parent backgrounds? – ifvictr Sep 05 '16 at 18:01
  • @ifvictr well in the provided code, i manually added `body, .dany:before{background: url(......)}`. and the blur effects works. Because `body` and `dany:before` have the same backgrounds. My issue is I want to make it working for any future background. For example I do not know what will be the parent background (`body` in this case) will be if someone else uses this code on another site?! so I need a mechanism that it automatically relies on its parent background no matter what it is. – DannyBoy Sep 05 '16 at 18:19

0 Answers0