Is it possible to override the background of a parent element to show the background of a grandparent element?

Question

Suppose I have the following:

<div id="grandparent" style="background:some-image">
 <div id="parent" style="background-color:white">
  <div id="child" style="something">

  </div>
 </div>
</div>

Is it possible to use CSS in #child to override the white background from #parent and show the image from #grandparent?

(This is for a parallax scrolling effect where simply removing #parent is not an option)

Thanks in advance!

Answer 1

No, DIVs don't act like masks in photoshop. But what you CAN do is to imitate this effect by placing the same background image for both grandparent and child by using background-position: fixed and adding corresponding background-offset or, if you prefere, by using JS to dynamicaly recalculate child background offset depending on it's position relative to grandparent - it's not so hard as it sounds.

Also, there is CSS3 bachround positioning, like this background-position: calc(100% - 20px) calc(100% - 10px);