1

I want the div to appear like it is blurring the background image of the page. Should work when div position is changed. Consider window resizing.

Weafs.py
  • 22,731
  • 9
  • 56
  • 78
Gnani
  • 455
  • 5
  • 18
  • may i know why it is downvoted? and being marked for close? – Gnani Jan 11 '15 at 07:42
  • Yes. Im also working on a solution. – Gnani Jan 11 '15 at 07:51
  • possible duplicate of [How can I make a CSS glass/blur effect work for an overlay?](http://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur-effect-work-for-an-overlay) – Weafs.py Jan 11 '15 at 08:14

1 Answers1

0

I was able to come up with a neat solution that requires no js. The technique was to use the same backgroud with specific common settings

JSFIDDLE

HTML:

<div class="mydiv">
    <div class='bgblur'></div>
</div>

CSS:

body {
    background: url('/etc/bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

.bgblur {
    background: url('/etc/bg.jpg') no-repeat center center fixed;
    background-size: cover;
    -webkit-filter: blur(26px);
    -moz-filter: blur(26px);

    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.mydiv {

    position: relative;
    overflow: hidden;

    // not necessary
    border: 2px solid black;
    height: 200px;
    width: 200px;
}
Gnani
  • 455
  • 5
  • 18