Background image in table row

Hi.

I have a table where I want to have one image as background for each row (spanning over all the cells).

This works:

<table>
<tr background="image.gif">
<td>Some text</td>
</tr>
</table>

However, if I use more than one cell in the rows...

<table>
<tr background="image.gif">
<td>Some text</td>
<td>Some more text</td>
</tr>
</table>

... the background image is repeated in both cells instead of spanning over them.

Do you know a workaround for this?
toker5Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZontarCommented:
Workaround is to span the cells together, set the background image for that cell. Then insert a table with 100% width, a single row and the same number of cells as the original row had before you spanned its cell:.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
  td#theCell {background-image:url('images/tn-treefrog.jpg');}
</style>
</head>
<body>
<table width="80" border="0">
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" id="theCell">
      <table width="100%" border="0">
        <tr>
          <td width="33%">&nbsp;</td>
          <td width="34%">&nbsp;</td>
          <td width="33%">&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="33%">&nbsp;</td>
    <td width="34%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
  </tr>
</table>
</body>
</html>


0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DexstarCommented:
@toker5:

> ... the background image is repeated in both cells instead of spanning over them.
> Do you know a workaround for this?

I believe you have to apply the background at the TABLE level, to get this effect.  Try using a nested table, and set the background for the table.

If using a nested table won't work for whatever reason, you can use style sheets to have the image repeated in each cell, but you can set the offset, so it looks continuous.  But that sounds really messy... :)

D*

Hope That Helps,
Dex*
0
seanpowellCommented:
It really depends on your layout - perhaps a simpler method is just to stack the tables directly, and apply the image to the table tag. If the layout is specified correctly, you may be able to avoid nesting the tables.

<html>
<head>
<title>Tables and Images</title>
<style type="text/css">
<!--
table#row1 { background:url(myimage1.gif); background-repeat:no-repeat; }
table#row2 { background:url(myimage2.gif); background-repeat:no-repeat; }
//-->
</style>
</head>
<body>
<table id="row1" border="1">
  <tr>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>
<table id="row2" border="1">
  <tr>
    <td>Some text</td>
    <td>Some text</td>
  </tr>
</table>
</body>
</html>
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

toker5Author Commented:
Zontar:
This is exactly what I wanted to avoid. There'll be so much overhead with this method...

Dexstar:
I could do that, but as you say, it would be very messy. And I'm writing a JSP-tag to provid a dynamic list/menu, so I don't think this solution would be an option.

seanpowell:
I'm afraid this would leave gaps between the tables which I couldn't afford.

Thanks for the quick responses, though.
0
seanpowellCommented:
>>this would leave gaps between the table
There wouldn't be any gaps if the CSS attributes were set correctly - it's just difficult to code for you without a more complete picture of the layout. Let me know if you need an example...
0
crazycomputersCommented:
Will using CSS with tr work?

<HTML>
<HEAD>
...
<STYLE TYPE="text/css">
<!--

table.bkgd tr {
    background: url(myimage1.gif);
    background-repeat:no-repeat;
}

// -->
</STYLE>
<BODY>
...
<TABLE CLASS="bkgd">
<TR><TD>...</TD><TD>...</TD></TR>
</TABLE>
...
</BODY>
</HTML>
0
crazycomputersCommented:
Hmm, that is pretty weird.  Both IE and Opera render it with the image repeated.
0
seanpowellCommented:
The only workaround that I know of is stacking the tables - or remove the tables completely and use CSS.
It does not leave gaps if set correctly, but the asker never responded back so I can't help them.
0
crazycomputersCommented:
Just as a side note, using the CSS tr{} does render "properly" in Mozilla (at least the old version I have) - the background is not broken up.  I'm not sure which set of browsers is violating the CSS standard.
0
Michel PlungjanIT ExpertCommented:
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I will leave the following recommendation for this question in the Cleanup topic area:
   Split: seanpowell, crazycomputers, Zontar and dextar

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

mplungjan
EE Cleanup Volunteer
0
crazycomputersCommented:
Not that I object to the split, but 4 days and 2.5 hours are hardly the same thing...
0
conticreativeCommented:
I know this is abandoned, but since I am facing this problem now I figure I can add to the discussion at least for those stumbling here later.

Setting a background image to the <tr> works fine (as of this writing) in IE8, Fiirefox 3.5, ff3.6 and Opera
It does not work in IE8 Legacy (IE7) Chrome and Safari. I have not checked IE6 but I am pretty sure that if IE7 won;t work, neither will IE6.

I am presently looking at the page in Chrome and weirdly enough the Chrome Dev tools do not show the background image being inherited from the <tr>. However, the image tiles on each cell.

Using nested tables is out of the question. If I don;t find a CSS based solution I'll simply either rebuild the table with stacked <div> or I'll insert 3 <div> in each cell to take the place of the <td>

The resulting code will be lighter both in the HTML and the CSS.

However this really stinks. There is no logical reason I can think of for the <td> to display the <tr> background. It has to be a bug or a rendering oversight. Especially since even IE displays it correctly.

I doubt I am going to find an elegant solution for this one, but I figure I'd save someone else the bother to check their browsers.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.