I have been working on a website and am having problems displaying graphics that should show in the body as "the ultimate behind-the-scenes" background. I have disabled all of the other layers of divs and cells above it, have tried different filetypes (gif, jpg and png) for the graphic, have placed the file in the root of my project (thinking that the path was broken somehow) and I am out of ideas.
I have been all over the WWW trying to find an aswer, but would really like to make some progress this weekend. Here's the basic structure of the page's code.
<body> <table class="maintable" width="100%"> <tbody> <tr> <td class="left" width="50%" valign="top"> </td> <td class="middle" width="900px" valign="top"> </td> <td class="right" width="50%" valign="top"> </td> </tr> </tbody> </table></body> My CSS looks like this: .maintable { background-image: url("images/mainbackground.jpg"); background-repeat: repeat-x; vertical-align: top; height: 100%;}
Of course, this is the rough of it, but I believe I have put the important stuff in the sample. The other classes I have shown (left, middle and right) all show their graphics and backgrounds just fine and they're on top of this layer. Again, I have even gone so far as to remove these "upper layers" and the background graphic still did not display.
Thanks in advance for your assistance!
Oh yeah -- I have also built this without the table object, but ended-up with the same result. And I have also tried placing the background image in the left-most cell itself (in the build with the table object).
Hi Russ,
The problem is that you cannot set a height of 100% on a table to stretch it vertically. If you change your height on your .maintable class to say, 900px you will see that your background image will appear. You can set fixed heights or let your content stretch your table vertically, and there are a few other techniques of making boxes stretch 100%. You should investigate this a little more by using a CSS resource. I hope this helps and gets your project moving forward again. Good luck Russ, and just post again if you are still having issues.
Good Luck!
Couto Solutions CEO4115 Broad Street, Suite B-5, San Luis Obispo, CA 93401Phone: (805) 540-3335 | Web: www.CoutoSolutions.com
Hey Russ,
I agree 100% with Justin in that you are unable to declare a 100% height on a table. There is an exception to this rule however, if you specify in your css for both the body and html to have a height of 100% then you should be able to specify a height of 100% on your table and it should then resize to the browser height.Your css needs to look like the following:
body, html { height: 100%;}.maintable { background-image: url("images/mainbackground.jpg"); background-repeat: repeat-x; vertical-align: top; height: 100%;}
In order for a container's css height of 100% to work properly its parent container must have a height set to it. In this case we are setting the height of the html tag to 100% of the browser height, then setting the body tag height to 100% of the html tag, and finally the table height to 100% of the body tag.
Even though the this would fix your current problem I would suggest that you apply the background image to your body tag as this would eliminate the need to apply heights to the html, body and table tag.
Couto Solutions Design Team4115 Broad Street, Suite B-5, San Luis Obispo, CA 93401Phone: (805) 540-3335 | Web: www.CoutoSolutions.com