html - How to mask divs with a linear gradient mask? -

i'm trying fade div's content out @ edges using couple of absolutely positioned overlay divs @ either side. however, need background of page viewable once fade finished, , throughout - masking content of 1 div using 2 others linear 'fade' gradients. see diagram below better explanation...

i have tried following:

• use -webkit-mask property linear gradient. works in webkit, nothing else. also, linear gradient rather choppy , stacatto when used mask property. not ideal.
• use svg gradient mask (e.g. in firefox / mdn demo). works, in firefox. not anywhere near poor gradient -webkit-mask / linear-gradient in chrome though
• using transparent masking gif or png. however, in example used masking colour shows through (see this question).

i'm hoping there might way i've not thought of, or perhaps alternative layout use achieve same aim. thoughts?

i think transparent png best bet, make absolute higher z index , make inside container div. container div float on background sliding image? use small 2 px slice , repeat along y axis, might not seeing problem correctly.

i tried small slice of radiant repeated down (y) , underlying image did scroll through top transparent images. if follow trying do. worked in chrome, firefox , safari: here css

#container { background-attachment: scroll; background-image: url(untitled-1.jpg); background-repeat: repeat-x; clear: both; float: left; height: 768px; width: 80000px; position: relative; } #container #info { float: left; width: 630px; margin-right: 20%; margin-left: 20%; position: fixed; margin-top: 100px; height: 519px; clear: both; clip: rect(100px,auto,auto,auto);  } #container #info #l_side { background-image: url(left_.png); background-repeat: repeat-y; float: left; height: 519px; width: 165px; position: relative; margin-right: -2px; } #container #info #content { background-color: rgba(0, 0, 255, 0.56); color: rgba(0, 0, 255, 0.56); float: left; height: 519px; width: 300px; position: relative; } #container #info #r_side { background-image: url(right.png); background-repeat: repeat-y; float: left; height: 519px; width: 165px; position: relative; margin-left: -1px; }