Mon, 2004-06-21 13:18
I have a regular page layout using a table:
<html>
<head>
<title>Pens</title>
<style type="text/css">
<!--
body, p, li, td, ul, ol, input {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
td.title {
width: 750px;
height: 88px;
font: bold 24pt times, serif;
vertical-align: middle;
text-align: center;
background-color: #eeefee;
}
-->
</style>
</head>
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="750" summary="Page layout">
<tr>
<td colspan="3" class="title">Pens</td>
</tr>
<tr>
<td valign="top">Left hand banner</td>
<td valign="top">Main area</td>
<td valign="top">Right hand banner</td>
</tr>
</table>
</div>
</body>
</html>
If I want to add a background image, which has transparency (see attached), to the title cell only, I've replaced the first table row with:
<tr>
<td colspan="3">
<table background="feather.gif" summary="Title">
<tr>
<td class="title">Pens</td>
</tr>
</table>
</td>
</tr>
thereby maintaining colspan as well as middle-alignment of the title. Only problem is, the image won't appear. How can I (1) make the image visible, (2) make it appear only once and (3) maintain the original style-settings for "title"?
Mon, 2004-06-21 15:51
#1
Re: Background images in table cells
technossomy wrote:
I have a regular page layout using a table:
...
<style type="text/css">
<!-- ...
td.title {...
[b]background-color: #eeefee; [/b]
...}
-->
</style>...
If I want to add a background image, which has transparency (see attached), to the title cell only, I've replaced the first table row with:
<tr> <td colspan="3"> <table background="feather.gif" summary="Title"> <tr> <td class="title">Pens</td> </tr> </table> </td> </tr>
thereby maintaining colspan as well as middle-alignment of the title. Only problem is, the image won't appear. How can I (1) make the image visible, (2) make it appear only once and (3) maintain the original style-settings for "title"?
alright, to display that image, remove the background-color from your css.
now with the repeat of the images. hmmm... I asked that once. I'll BRB with that.
edit*: all right, I'm back
background: url("feather.gif") no-repeat;
put that in your css. right under where you took out the background-color. then you have to center the pic.
#3. I don't quite understand your question for 3.
In summary:
td.title {
width: 750px;
height: 88px;
font: bold 24pt times, serif;
vertical-align: middle;
text-align: center;
background: url("feather.gif") no-repeat;
}
This is your new css td.title
I refuse to be like the faceless masses of sheep and have a signatu......awwwwwwwww CRAP!!
Backups? Ha! I've never had troub**&{[}$$ERROR NO CARRIER
Mon, 2004-06-21 17:42
#2
Background images in table cells
Thanks for that, but if I want to maintain all style settings (per your question) then the end result should look something like:
1. "Pens" as the top layer
2. Feather.gif as the middle layer
3. Grey background color as the bottom layer (the color will shine through as the image has transparency)
In other words:
- "Pens" will be middle-aligned, because of its style and is always visible regardless of any other coloration used.
- The image will be visible, because it should appear on top of the background color, but may be overlayed by the text.