Is It Possible To Apply A Blur Filter To A Background-image Of A Div With Position:fixed, From Another Div Rendered On Top Of It?

How is my question different from the proposed duplicate: I want only the part of the div.background-pic (the div with the background image) which is behind div.lower (the div with

Solution 1:

There's a way with some js to get this result, using clipping path and some repositioning on scroll. Like this:

HTML:

<divclass="background-pic-top"></div><divclass="background-pic-bottom"></div><divclass="top-blur"id="scrollingDiv"><divclass="upper"><svgclass="clip-svg"width="400"height="500"style="position: relative"><defs><clipPathid="uppersvg"clipPathUnits="userSpaceOnUse"><rectx="0"y="0"width="400"height="300" /></clipPath></defs></svg></div><divclass="lower"><svg><defs><clipPathid="lowersvg"clipPathUnits="userSpaceOnUse"width="200"height="200"><rectx="0"y="300"width="400"height="200" /></clipPath></defs></svg></div></div>

JS:

var elem = document.getElementById('scrollingDiv');
    var clipUp = document.getElementById('uppersvg');
    var clipDown = document.getElementById('lowersvg');

    elem.onscroll = function (e) {
        clipDown.getElementsByTagName('rect')[0].setAttribute('y', 300 - elem.scrollTop);
        clipUp.getElementsByTagName('rect')[0].setAttribute('y', 0 - elem.scrollTop);
    }

CSS:

body {
            margin: 0px;
        }
        .background-pic-top {
            background-image:url(http://khongthe.com/wallpapers/nature/beautiful-valley-45851.jpg);
            background-size:cover;
            position:fixed;
            z-index:-1;
            height:400px;
            width:400px;
            clip-path: url(#uppersvg);
            -webkit-clip-path: url(#uppersvg);
        }
        .background-pic-bottom {
            background-image:url(http://khongthe.com/wallpapers/nature/beautiful-valley-45851.jpg);
            background-size:cover;
            position:fixed;
            z-index:-1;
            height:400px;
            width:400px;
            clip-path: url(#lowersvg);
            -webkit-clip-path: url(#lowersvg);
            -webkit-filter: blur(5px);
            filter: blur(5px);
        }
        .top-blur {
            height:400px;
            width:400px;
            overflow: auto;
        }
        .upper {
            height:300px;
            width:100%;
            background-color: rgba(255, 127, 80, 0.5);
        }
        .lower {
            top: 200px;
            height:200px;
            width:100%;
            background-color: rgba(0, 255, 255, 0.51);
        }

http://jsfiddle.net/4f601tt7/7/

Won't be cross-browser but it seems to work on Chrome and Firefox.