Using supersized plugin and i like the background image to be clickable?

Hi,

I am implementing supersized plugin to have random fullscreen images and i like the images to be clickable. But when activate the plugin behind my website i can't click the images. I guess it has to do with the z-index not being swap

here's in brief the structure

<div id="slidecaption"></div>
<div id="supersized"></div>

<!--content-->
<div id="content-wrapper">
<div id="wrapper">

</div>
</div>

Code (markup):

and css

	#supersized{
	    position:fixed;
	}
	#supersized img{ -ms-interpolation-mode: bicubic; }
	#supersized img, #supersized a{
	    height:100%;
	    width:100%;
	    position:absolute;
	    z-index: -1;
	}
	
	#supersized .prevslide, #supersized .prevslide img{
	    z-index: 1;
	}
	#supersized .activeslide, #supersized .activeslide img{
	    z-index: 2;
	}

#content-wrapper{ 
		width:100%; 
		height:100%; 
		position:absolute; 
		top:0; 
		overflow:auto; 
		z-index:4; 
		text-align:center; 
/*		pointer-events: none;*/

	}
#wrapper {
	width: 800px;
	margin: 0 auto;
	text-align:center;
}

Code (markup):

Any tips how i can click the background images?

btw making

#content-wrapper{ 
		width:800px; 

Code (markup):

screws up the layout

 

Do you mean click through the content on top of the background, or click on the empty sides next to the content?
It might be easier to put an icon somewhere that takes users to the image eg. a floating triangle icon in the corner of the viewport.