Darkmatter5 Posted January 2, 2009 Share Posted January 2, 2009 Here's my CSS td.microsoft { background-image: url('images/Microsoft icon-200.png'); background-repeat: repeat; } td.nintendo { background-image: url('images/Nintendo icon-200.png'); background-repeat: repeat; } td.sony { background-image: url('images/Sony icon-200.png'); background-repeat: repeat; } Here's my page code <table align="left" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td class="nintendo"> <img style="display: inline;" src="images/GBA icon-256.png" border="0" width="70" height="70" alt="GBA icon-256.png"> <img style="display: inline;" src="images/NES icon-256.png" border="0" width="70" height="70" alt="NES icon-256.png"> <img style="display: inline;" src="images/SNES icon-256.png" border="0" width="70" height="70" alt="SNES icon-256.png"> <img style="display: inline;" src="images/N64 icon-256.png" border="0" width="70" height="70" alt="N64 icon-256.png"> <img style="display: inline;" src="images/GC icon-256.png" border="0" width="70" height="70" alt="GC icon-256.png"> <img style="display: inline;" src="images/Wii icon-256.png" border="0" width="70" height="70" alt="Wii icon-256.png"> </td> <td class="sony"> <img style="display: inline;" src="images/PS2 icon-256.png" border="0" width="70" height="70" alt="PS2 icon-256.png"> <img style="display: inline;" src="images/PS3 icon-256.png" border="0" width="70" height="70" alt="PS3 icon-256.png"> </td> <td class="microsoft"> <img style="display: inline;" src="images/Xbox icon-256.png" border="0" width="70" height="70" alt="Xbox icon-256.png"> <img style="display: inline;" src="images/Xbox 360 icon-256.png" border="0" width="70" height="70" alt="Xbox 360 icon-256.png"> </td> </tr> </table> Why isn't this working? The cells aren't displaying any images in the background. Quote Link to comment Share on other sites More sharing options...
tmatt95 Posted January 2, 2009 Share Posted January 2, 2009 Hi, I downloaded the code and created a file called testtable.html into which I copied your code into adding the header, footer and style sheet tags to make this: <html> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <table align="left" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td class="nintendo"> <img style="display: inline;" src="images/GBA icon-256.png" border="0" width="70" height="70" alt="GBA icon-256.png"> <img style="display: inline;" src="images/NES icon-256.png" border="0" width="70" height="70" alt="NES icon-256.png"> <img style="display: inline;" src="images/SNES icon-256.png" border="0" width="70" height="70" alt="SNES icon-256.png"> <img style="display: inline;" src="images/N64 icon-256.png" border="0" width="70" height="70" alt="N64 icon-256.png"> <img style="display: inline;" src="images/GC icon-256.png" border="0" width="70" height="70" alt="GC icon-256.png"> <img style="display: inline;" src="images/Wii icon-256.png" border="0" width="70" height="70" alt="Wii icon-256.png"> </td> <td class="sony"> <img style="display: inline;" src="images/PS2 icon-256.png" border="0" width="70" height="70" alt="PS2 icon-256.png"> <img style="display: inline;" src="images/PS3 icon-256.png" border="0" width="70" height="70" alt="PS3 icon-256.png"> </td> <td class="microsoft"> <img style="display: inline;" src="images/Xbox icon-256.png" border="0" width="70" height="70" alt="Xbox icon-256.png"> <img style="display: inline;" src="images/Xbox 360 icon-256.png" border="0" width="70" height="70" alt="Xbox 360 icon-256.png"> </td> </tr> </table> </body> </html> I then created the css file in the same directory and called it test.css using the css you provided. Having done that I tried to run the website and noticed you were referencing images from the css which were not being displayed. The css is linking to a (images) folder on the same level as the css sheet. Below is an example of how it would be in the test situation: *testtable.html *Images (folder) **The images you want to link to your css need to go in here *test.css Having moved a test image across I managed to get the background images to work on the table. Are your images where the css thinks they are? Are you calling the css file if it is stored separately? Change the background image to a color, does that appear on the page? Hope this helps, Matt Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.