image background in a cell: doesn't work 1

davikokar · Jun 9, 2004

Hallo,

I'm trying to insert a img as a background of a cell.
The correspond of this:
<td background="img/green_grey.gif">
but with CSS.
I tried this codes:

td.menuimg {background: url(images/xyz.gif);}
td.menuimg {background-image: url(images/xyz.gif);}

with all possible combination of quotes but still it doesn't display the image... browser is Explorer 6 and the page is xhtml transitional.

Does someone knows?
thanks

LFI · Jun 9, 2004

The second way you list the code (td.menuimg {background-image: url(images/xyz.gif);}
) is correct (according to a page from my favorite on-line, style-sheet resource:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/backgroundimage.asp).

Obviously, check to make sure your path is correct.

The important thing to note is that the table cell does NOT size itself to display the whole background image. The image is not considered cell content. The cell sizes itself to display only its contents (and to accommodate the tallest cell in the row). If the cell has no contents and the row has no height, you are not likely to see any part of your image.

'hope that gets at the problem. If you want to show the whole image, use IMG tags in the cell. If you want the image to be background-like, but still show the whole image, use IMG tags and a floating DIV to place the cell contents over the image.

A little example of how that might be done:

Code:

<%@ taglib uri="jruntags" prefix="jrun" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
<title>Nicole Kidman Background Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
td.menuimg {background-image: url(Nic1.bmp);}
</style>
<script>
function moveNicDiv()
{
 nicDiv.style.left=nicImage.offsetLeft+(nicImage.offsetWidth/2);
 nicDiv.style.backgroundColor='white';
 nicDiv.style.display='inline';
}
</script>
</head>
<body onload='moveNicDiv()'>
<table>
<tr>
<td><img id='nicImage' src='Nic1.bmp' /><div id='nicDiv' style="position:absolute;display:none"><h4>Nicole Kidman</h4></div>
</td>
</tr>
</table>
</body>
</html>

Good luck!

--Dave

P.S., I'm also using IE6.

dkdude · Jun 9, 2004

Hi,

This one works in IE 6:

Code:

<HTML>
<HEAD>
  <TITLE>Table CSS Background</TITLE>
  <STYLE>

    #leftCell {
      background-image : url(img/red.gif);
    }

    #rightCell {
      background-image : url(img/green.gif);
    }

  </STYLE>
</HEAD>
<BODY>
  <TABLE>
    <TR>
      <TD ID="leftCell">
        Left - Red backgorund
      </TD>
      <TD ID="rightCell">
        Right - Green background
      </TD>
    </TR>
  </TABLE>
</BODY>
</HTML>

Good Luck

Jakob §;O)

BillyRayPreachersSon · Jun 9, 2004

If your HTML as you've given:

Code:

<td background="img/green_grey.gif">

works fine, then this would be the appropriate CSS and HTML to use:

Code:

<td class="menuimg">
...
td.menuimg {
   background-image: url(img/green_grey.gif);
}

This assumes, of course, as Dave has already mentioned, that your paths are correct (you haven't said if your CSS is on the page, or linked from an external file). If your CSS is in an external file, the path should be the path to the image relative to the CSS file, not relative to the HTML file.

Hope this helps,
Dan

davikokar · Jun 9, 2004

aahhhh, this is what I was missing. The path in the external css file has to be relative to the css file and not to the html one...thanks for the enlightment

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

image background in a cell: doesn't work 1

davikokar

Technical User

LFI

Programmer

dkdude

Programmer

BillyRayPreachersSon

Programmer

davikokar

Technical User

Similar threads

Part and Inventory Search

Sponsor