Forum Moderators: open
I have seen many posts that say CSS is the way to solve similiar problems. However I'm already using CSS to set a background image for my entire web page. The error or errors, I should say, are coming from the fact that I have different background images in several table portions of my webpage. I'm doing this to prevent from having to use layers. I want to have text over images and the only way I know how to do this is by setting a background image in the table or by using layers. I don't want layers, because my entire webpage will have to be left justified and I would like it to be centered, plus they're just a pain to use anyway.
So my question is, is there any way to insert a different code that will validate my HTML 4.01 Transitional web page with the use of background images in tables?
If there's a way to use CSS in the body section of the web page, this might work, but I haven't a clue as to what code this might be. Help on this matter would be most appreciated.
Thanks,
Enigmatic
body {
background: url(bgimage.gif);
}
Then you can set the table backgrounds like this.
table {
background: url(table_bg.gif);
}
<td height="6" colspan="3" background="PSD Files/Top-Bottom-Sides.gif"><img src="PSD%20Files/Top-Bottom-Sides.gif" width="6" height="6"></td>
td.bg {
background: url(PSD%20Files/Top-Bottom-Sides.gif);
}
If you are using this td background for one page only, you may wish to just put the above code in the <head> section surrounded by <stlye></style> tags.
then in your mark-up:
<td height="6" colspan="3" class="bg"></td>
Note: "bg" may be changed to any name you wish.
<added> Welcome to WebmasterWorld Enigmatic </added>
I have setup my site in such a way that it uses nearly 20 of these background images inside each table per page, and having to make a CSS code each and everytime is not only extremely cumbersome but code heavy for my pages. I would call an external .css file, but this didn't work in Netscape 7.0 when I tried it before for common rollovers, although it did work for IE 6.0.
If I'm wrong on the Netscape thing, I will try it again, but if not - is there any other way to insert background images into tables that would be considered valid code other than the solutions already posted?
I really do appreciate all the help you guys have offered. Thanks again,
Enigmatic
Enigmatic
<head>
<title>table thing</title>
<style>
td.bg1 {background-image:url(image1.gif)}
td.bg2 {background-image:url(image2.gif)}
td.bg3 {background-image:url(image3.gif)}
td.bg4 {background-image:url(image4.gif)}
</style>
</head>
<body>
<table>
<tr>
<td class="bg1"> </td>
<td class="bg2"> </td>
<td class="bg3"> </td>
<td class="bg4"> </td>
</tr>
</table>
</body>
</html>
You should have no problem putting the styles into an external style sheet:
<link rel="stylesheet" href="mystyles.css" type="text/css">
option 1:
#page {
width : 600px;
margin : 20px auto;
}
option 2:
#page {
position : absolute;
left : 50%;
margin-left : -300px;
width : 600px;
}
