I'm trying to add a gradient I made as a background to my "centerContent", so it acts as a shadow to the border of "centerContent".

I'm using CSS's z-index property to get the desired result, but am not having this "content-shadow" image displaying on my page, at all. There may be other way of achieving the same, but z-index seems little easy to understand, so I'll stick with z-index for now.

The related CSS is:


	border-left:1px solid #999999;
	border-right:1px solid #999999;

while my HTML is:

<div class="centerContentShadow" id="centerContent">

My website in itself can be seen on (please refresh the page, if :


While all the files can be seen on:


My desired result can be seen at: http://www.tristarwebdesign.co.uk/

Am I not doing things in the way I should've been doing ???

Rather that starting a new thread for each question, could you keep all related posts within the same thread?

Many CSS elements, such as z-index, and floats, take on their "rendered meaning" based on associated (in terms of the document hierarchy) elements.

In other words, if you're going to z-index one element, you should z-index all elements.

Your example page isn't really helpful, because all they are doing is placing standard images within divs... no fancy tricks going on.