CSS Forum

**electrifire** · 05-27-2010, 03:23 PM

Hi

I'm attempting to re design my website but want to keep 1 part of the old site,

www.electrifire.co.uk I want to keep the shadow outline which is this in the css:

#bodyTop{ width:930px ;margin:10px auto 0 auto; background:url(images/wrapTop.gif) no-repeat 0 0; height:7px; overflow:hidden;}
#mainwrap{ width:930px; margin:0 auto; background:url(images/wrapBg.gif) repeat-y 0 0;}

so I copied this code into my new css and added this into the new html code:

<div id="bodyTop"></div>
<div id="mainwrap">

however the shadow around the page is not being displayed and I can't work out why, I also added the images into the new image folder, advise would be great

**electrifire** · 05-27-2010, 03:47 PM

I've uploaded the test page here:

www.electrifire.co.uk/newdesign/index.html

I've checked the images are there but its just not displaying

**LadynRed** · 05-27-2010, 08:19 PM

When I tried to open the background image with the shadow that you're specifying, it gave me a 404 - not found error. Soo.. might want to check paths and that the image is where it's supposed to be.

**electrifire** · 07:38 AM

Thanks for your response, I checked the paths and I think they are correct I'm not sure why you got a 404 error:

CSS Code
#bodyTop{ width:930px ;margin:10px auto 0 auto; background:url(images/wrapTop.gif) no-repeat 0 0; height:7px; overflow:hidden;}
#mainwrap{ width:930px; margin:0 auto; background:url(images/wrapBg.gif) repeat-y 0 0;}

Image path:

http://www.electrifire.co.uk/newdesign/images/wrapTop.gif
http://www.electrifire.co.uk/newdesi...ges/wrapBg.gif

Html code:
<body>

<div id="bodyTop"></div>
<div id="mainwrap">
<div id="wrap">

I must be missing something really obvious here? the images wont display

I've just tried changing the image path to http://www.electrifire.co.uk/newdesi...ges/wrapBg.gif etc but still no joy

**chrishirst** · 05-29-2010, 07:41 AM

images are referenced from the location of the CSS file NOT the location of the HTML document they are applied to!

**electrifire** · 05-29-2010, 08:44 AM

Thanks I never knew that! Anyway I edited the css file so the image paths are:

#bodyTop{ width:930px ;margin:10px auto 0 auto; background:url(../images/wrapTop.gif) no-repeat 0 0; height:7px; overflow:hidden;}
#mainwrap{ width:930px; margin:0 auto; background:url(../images/wrapBg.gif) repeat-y 0 0;}

but the images are still not displaying?

**chrishirst** · 05-29-2010, 08:54 AM

use a ROOT relative reference rather than DOCUMENT relative that way no matter where the referencing files are, the image will always be in the same location.

/newdesign/images/

**electrifire** · 05-29-2010, 09:28 AM

I'm still having issues with this I'm afraid, its probably so simple but everything I try just does not work:

I used the ../images prefix as all the other images have this, but I have changed those 2 images to have the prefix you said above /newdesign/images/

But still they dont show up, the css is showing the correct code:

#bodyTop{ width:930px ;margin:10px auto 0 auto; background:url(/newdesign/images/wrapTop.gif) no-repeat 0 0; height:7px; overflow:hidden;}
#mainwrap{ width:930px; margin:0 auto; background:url(/newdesign/images/wrapBg.gif) repeat-y 0 0;}

Any other suggestions?

**chrishirst** · 05-29-2010, 10:53 AM

#bodytop background shows up ok

and where is the background for #mainwrap supposed to show up??

because in your code #mainwrap is completely covered by #wrap which has a solid white background and therefore the #mainwrap background ISNT going to be visible.

**electrifire** · 05-29-2010, 06:42 PM

perfect got it sorted thanks

www.electrifire.co.uk/template