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.
It is not possible to do that using only CSS. Save yourself some time, and look into alternative solution
see also: