View Single Post - CSS z-index for image ???

havilah · #3 (**permalink**) Jul 7th, 2007, 10:10

Quote:

Originally Posted by 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:

Code: Select all

.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:

Code: Select all

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

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

http://darsh25.silverserve.co.uk/All...gn/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 ???

Hi, I'd been looking for a code that can help me put a shadow on my page. I found this post and decided to twik it a bit...just like this:

Code: Select all

<style type="text/css">
<!--
body {
background-image: url(images/bg_grd.gif);
background-repeat: no-repeat;
}
.centerContentShadow
{
    background-image: url(images/bg-trns.png);
    background-repeat:repeat-y;
    width:800px;
	margin-top: -20px;
    z-index:-1;
}
#centerContent
{
    background-image: url(images/bg-inner.gif);
    width:770px; 
    margin-left:12px;
	margin-right:12px;
   	border-left:1.2px solid #003366;
    border-right:1.2px solid #003366;
}

-->
</style>

....and then the

HTML: Select all

<body><center><div class="centerContentShadow"><div id="centerContent">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div></div>
 </center>
</body>

...Don't mind the '<p>' tags. Was just trying to pull down the div to appreciate the effect. It's working well in Opera and Firefox but not IE. Can anyone show me what I need to do? You can check out the page here http://havilahandhills.com/test
Thanks,
Havilah