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 :

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

  • 2 Contributors
  • 1 Reply
  • 139 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Two things are causing the shadow not to appear: CSS specificity and stacking context. Putting the shadow rule on the same element as the content means the ID rule will override the class rule (ID selectors beat class selectors). Also, z-index only affects elements that participate in a stacking context (positioned elements or certain layout items). See MDN on CSS specificity and z-index/stacking for the exact rules.

A simple, reliable fix is to separate the shadow from the content with a wrapper. The wrapper carries the shadow background; the inner panel sits above it with a higher z-index:

<!-- HTML -->
<div class="shadow-wrapper">
  <div class="content-panel">...content...</div>
</div>

/* CSS */
.shadow-wrapper { position: relative; background: url(shadow.jpg) repeat-y; }
.content-panel { position: relative; z-index: 2; background: url(content-bg.jpg); /* borders/sizing here */ }

If you prefer no extra markup, create the shadow with a pseudo-element so you can keep one element in markup:

.content-panel { position: relative; z-index: 1; }
.content-panel::before {
  content: "";
  position: absolute;
  left: -40px; top: 0; bottom: 0;
  width: 40px;
  background: url(shadow.jpg) repeat-y;
  z-index: 0;
}

Modern alternative: use box-shadow or a CSS gradient for the shadow—no images and simpler layering. Troubleshooting checklist: inspect computed styles in DevTools (to spot overridden backgrounds), confirm the image loads in the Network tab, ensure the element is positioned (not static), and watch for ancestor transforms/opacity that create new stacking contexts. was right to point out the render context; the wrapper or pseudo-element approach will resolve the conflict between rules.

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.