My JavaScript scrolling view is quite intricate, enclosed within a DIV. The elements inside have event handlers for mouseover and mouseout to manage the scrolling behavior, as well as clickable links.
Currently, I am in need of a semi-transparent image that can be overlaid on the scrolling view, either partially or completely, without disrupting the event handling. My idea was to wrap the entire DIV in another DIV with a background image set as the overlay image. This way, events on the overlay image would be passed down and captured by the child elements. I've struggled to make the container DIV's background render over its contents so far, even though I know it goes against typical DOM practices. I'm trying to avoid altering my existing JS code just for this additional image, no matter how unconventional the solution may be. An example structure could look like this:
<div id="superimposed" style="background-image: url('superimposed.png')">
<div id="scrolling-view"> ... </div>
</div>
I've experimented with various z-index settings without success. Is there a way to achieve this? If not, do you have any alternative suggestions?