Hey! So I'm helping my roommate with his website and I'm having a small silly problem that I can't figure out...

This is the page uploaded to a test spot.
http://www.kmkingdom.com/bodigm/test/services.htm

If you notice on the left, the background under the word "Services" won't show (it's a png of red to black gradient).

I have several things going on but it's a div nested in a table thats nested in a table thats nested in a div? if that makes sense.

http://www.kmkingdom.com/bodigm/test/bodigm.css
^^stylesheet


the css for that tag:
.servicesbg {
background-attachment: fixed;
background-image: url(images/required/images/services-terms_02.png);
background-color: #000000;
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
overflow: visible;
height: 301px;
width: 238px;
top: 0px;
bottom: 0px;
font-weight: normal;
left: 0px;
right: 0px;
padding: 0px 10px 5px;
position: relative;
}

And HTML:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="37%"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="258"><img src="images/required/images/services-terms_01.png" width="238" height="47"></td>
</tr>
<tr>
<td valign="top" class="servicesbg"><div id="Layer1" ><a href="services1.htm" target="defs">[tracking / multi-track recording]
</a> <p><a href="services2.htm" target="defs">[pre-production / production]</a></p>
<p><a href="services3.htm" target="defs">[vocal recording / overdubs]</a></p>
<p><a href="services4.htm" target="defs">[editing / processing &amp; effects]</a></p>
<p><a href="services5.htm" target="defs">[mixing]</a></p>
<p><a href="services6.htm" target="defs">[mastering]</a></p>
<p><a href="services7.htm" target="defs">[performance mix / mix tape]</a></p>
<p><a href="services8.htm" target="defs">[remixing]</a></p>
<p><a href="services9.htm" target="defs">[session-musician tracks / file swapping]</a></p>
<p><a href="services10.htm" target="defs">[sound analysis / noise removal]</a></p>
<p><a href="services11.htm" target="defs">[audio transfer services / archiving] </a></p>
</div></td>
</tr>
</table></td>
<td width="63%"><iframe src ="servicesblank.htm" class="definitions" id="defs" name="defs" frameborder="0" scrolling="auto"></iframe></td>
</tr>
</table>

And finally the silly graphic that won't display:

http://www.kmkingdom.com/bodigm/test/images/required/images/services-terms_02.png
(which for the record, if you right click in firefox and select "view image background" does display).

If anyone could please help you would be a Godsend!

Thanks everyone!!!!
~beth.

There are a few things that could be wrong. I would suggest beginning by checking the file name and make sure all letters match case. Then check the directory, making sure that you are calling on the image in the right location, case does matter.

The setting background-attachment to 'fixed' is causing your problem. The background is being displayed properly, but when you set the background-attachment of an element to be fixed, it's position becomes relative to the browser viewport and the element (in your case, a table cell) with the fixed background acts like a window to the fixed background, allowing you to see it whenever it moves "over" the image's position on the page. To see your background, try resizing your window until you can scroll down far enough that you can see the background image since it is at [0, 0] relative to the viewport — the top of the page. Alternatively, you could set your background's position like so:
background-position: 111px 419px;

To make it do what you want to do, however, simply remove the background-attachment property from the rule to allow it to default to 'scroll' or set it to 'scroll' in lieu of 'fixed'.

The setting background-attachment to 'fixed' is causing your problem. The background is being displayed properly, but when you set the background-attachment of an element to be fixed, it's position becomes relative to the browser viewport and the element (in your case, a table cell) with the fixed background acts like a window to the fixed background, allowing you to see it whenever it moves "over" the image's position on the page. To see your background, try resizing your window until you can scroll down far enough that you can see the background image since it is at [0, 0] relative to the viewport — the top of the page. Alternatively, you could set your background's position like so:
background-position: 111px 419px;

To make it do what you want to do, however, simply remove the background-attachment property from the rule to allow it to default to 'scroll' or set it to 'scroll' in lieu of 'fixed'.

wow that simple! I would have never thought to change that, can't say I've had it be a problem before.

Kudos Josh! (I hope that is your name!)

Thank you very much for your help!!
~beth.

Yep, that's my name. And no problem.