Background-image in a table cell from CSS

background-image td css id selector

[DLMascot]

I'm attempting to teach myself how to use CSS by rebuilding a very simple site I built using tables a long, long time ago... so forgive me you find I've missed something simple... but I'm about to pull out what little hair I have left...

I have my "menu" of links along the left side of the page inside of a table cell <td>. Originally it was a simple background color. I am trying to fill it with a tiled image instead using a css.

The code in my css includes the following (once you're done laughing at mistakes, feel free to point them all out =P ) NOTE: All other elements from my css carry into the page correctly... including all pieces inside of #menu except background-image and of course background-repeat
******************************************************
table{width: "100%";
border-collapse: "collapse";
border-spacing: "0";
align: "left";}

td{padding: "0";
spacing: "0";}

#menu{font-family: "arial", "sans-serif";
text-align: "center";
color: "#FFFFFF";
background-color: "#000099";
background-image: url(Graphics/menu_bg.jpg);
background-repeat: repeat;}
***********************************************
With the code in the html page including the following
************************************************
<table valign="0">
<tr>
<td id="menu" width="200" height="200" >
links here
</td>
<td id="title">
<p><h3> some text here </h3)</p>
<hr/>
</td>
</tr>
</table>
******************************************************
I've tried using a class identifier instead...
******************************************************

td.menu {background-image: url("Graphics/menu_bg.jpg");}

******************************************************
Changing the code to reflect this....
******************************************************
<table valign="0">
<tr>
<td class="menu" width="200" height="200" >
links here
</td>
<td id="title">
<p><h3> some text here </h3)</p>
<hr/>
</td>
</tr>
</table>
******************************************************

I've tried a number of combinations of quotation around the url(.jpg) tag in my css, I've tried using a <div id="menu" > surrounding the <td> </td> tags...

I even decided not to use the css and tried to set the background directly inside the <td> tag... to no avail.

Nothing I've tried is working, please help.

Mascot

[isitreal]

It sounds like you're using the wrong path in your CSS background image property to me, your syntax is correct, no ' or " are needed in the background-image:url();

If this is running on a webserver, set the path to /Graphics/menu_bg.jpg to force it to the root, that's assuming that your Graphics folder is at the root level.

Also, if you are making this in windows, which is not case sensitive, and uploading it to a unix/linux server, which is case sensitive, and you accidentally made your folder name /graphics/ on the server, it won't work.

If the page you are making is not in the root, the path you gave will be looking for a folder called Graphics inside the folder the current page is in, same if the CSS is in a different folder (although that varies browser to browser), which is why you should always use an absolute path to the root when doing this stuff, or a relative path like ../Graphics/ if you are one folder level down, that way it will also work on your home computer if you don't have a server running.

[DLMascot]

isitreal, you are a genius... in relative terms of course... since I'm comparing you to me, it doesn't really mean much other than to say thank you very much...

I've learned to be careful about the case sensitive issue as I've put a web site up on a unix/linux server in the past...

I had used / before the pathing in my previous attempts to no avail...

The solution, which you so precisely pointed out was the relative path... the Graphics folder and CSS folder are both in the root of the html page... so I just had to drop back from CSS before directing to the Graphics folder.

Solution:
background-image: url(../Graphics/menu_bg.jpg);

Thanks a million.

Mascot

[isitreal]

You have to be running a webserver on your computer to use the / root path, on your webserver that should have worked as long as /graphics was at the root. For running on your home system you have to use relative paths, since the / command will look for the file for example here:
c:\Graphics.

Look into setting up apache 2 (http://httpd.apache.org/download.cgi) on your home computer if you want. That way you can run your sites just like they run on your server.

But I used the relative path for years to run my stuff at home before I did that, so it's a good solution.