Member Avatar for j4mes_bond25

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:

.centerContentShadow
{
	background-image:url(content-shadow.jpg);
	background-repeat:repeat-y;
	width:800px;
	z-index:-1;
}

#centerContent
{
	background-image:url(contentbackground.jpg);
	width:700px; 
	margin-left:45px;
	float:left;
	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 :

http://darsh25.silverserve.co.uk/AllInclusiveWebDesign/contact.php

While all the files can be seen on:

http://darsh25.silverserve.co.uk/AllInclusiveWebDesign/

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 ???

  • 2 Contributors
  • 1 Reply
  • 115 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by tgreer
Member Avatar for tgreer

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.