How to make links behind a div with a superior z-index value clickable?

Question

I have this design for an HTML book and i am trying to achieve a certain effect which fading the text when scrolling the page which i successfully done using a fixed div with a superior z-index value and a PNG background image.

.book-bg {
background: url(../../img/book-frame-bg.png) no-repeat fixed center top;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;}

But now all my links which covered by the ".book-bg" div aren't clickable, how can i solve this?

Sample page here: http://mmahgoub.com/thebook/chapter-01.html

Thanks

Answer 1

In Firefox, Opera and Chrome/Safari you could use pointer-events: none in your CSS rule. If you need IE compatibility as well then try Forwarding Mouse Events Through Layers.