Align div background with that of its parent

Question

I would like to have a div with a background and inside it more divs with the illusion that their background applies some filter on the parent's background. As the support for filters is not quite here, I was thinking that I will create the filtered image and then set the background-position attribute of children in such a way that the backgrounds align with the parent. In jQuery, I could write something like:

$this.css('background-position', -$this.offset)

Is it possible to achieve this effect without JavaScript? I was able to get almost what I wanted by setting children background to fixed, but of course I do not want them to be fixed to viewport, I want it to be fixed to parent.

To give you a better idea, here is a quick mockup I put together in Gimp:

EDIT: I have created JSFiddle, with fixed background.

Answer 1

It is not possible to do that using only CSS. Save yourself some time, and look into alternative solution

see also:

• CSS background-position fixed to parent
• background image position fixed to parent element

Answer 2

you need to create a png picture with a transperancy (and this blue-purple color), and give to the children this image as background-image. Then you need to center the children with margin:auto.

It's should work! Hope I understood you correctly.. :)

Sorry about my poor English.. Good luck!