CSS z-index for image ???

j4mes_bond25 · #1 (**permalink**) Jul 6th, 2006, 13:07

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

minute44 · #2 (**permalink**) Jul 6th, 2006, 13:51

This may sound stupid but try moving the properties for Content Shadow physically further down in the CSS text. It get's interpreted like a script kind of so the last thing to get read is the last thing rendered.

It might work. might not...

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

Lchad · #4 (**permalink**) Jul 7th, 2007, 11:49

I don't see a difference in FF2 and IE7. Can you tell me more?

havilah · #5 (**permalink**) Jul 7th, 2007, 12:11

Lchad, IE displays it with an additional white background underneath the transparent shadow. Othe browsers don't. That's the major difference. I want to know the version of IE that u r using?

Lchad · #6 (**permalink**) Jul 7th, 2007, 12:14

havilah · #7 (**permalink**) Jul 7th, 2007, 12:19

ok, but have u noticed the difference?

Lchad · #8 (**permalink**) Jul 7th, 2007, 12:26

Your problem is with IE6. You are using a png image for that correct?
I do not believe png is supported by ie6. Change it to a gif and you should be fine.

havilah · #9 (**permalink**) Jul 7th, 2007, 12:34

gif won't let the background remain transparent.

Lchad · #10 (**permalink**) Jul 7th, 2007, 12:43

Looks like you'll need some javascript to be able to make it work in IE 6
See this tutorialhttp://allinthehead.com/retro/289/sl...kgrounds-in-ie

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
z-index - dragging	benreynolds4	JavaScript Forum	0	May 25th, 2008 14:54
google and index	dab42pat	Search Engine Optimization (SEO)	5	Aug 15th, 2007 13:59
google-index	cyclone2876	Search Engine Optimization (SEO)	3	Jun 26th, 2007 14:24
TOC and Index	bonekrusher	Other Programming Languages	0	Jul 24th, 2006 23:03

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS z-index for image ???