2 replies [Last post]
technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 31 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

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"?

Tags:
nix
nix's picture
Offline
Enthusiast
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Last seen: 11 years 46 weeks ago
(n): a position or site occupied or available for occupancy or marked by some distinguishing feature
Timezone: GMT-4
Joined: 2003-08-12
Posts: 159
Points: 0

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

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 6 years 31 weeks ago
Timezone: GMT+1
Joined: 2004-06-09
Posts: 260
Points: 8

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.