Background image to TR

HTML & CSS
1

Hi,

I have added background image blueGradient.png to tr.

It is not showing as expected.

attached image.

I want to show background image properly and need help in this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>background Image</title>
</head>

<body>
<table width="100%" border="1">
  <tr style=" background-color:#00FFFF; background-image:url(blueGradient.png); background-repeat:repeat;">
    <td colspan="2" align="center">Title</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

-Thanks
Zohaib.

2

yeah… I hate that about tables too!

Table elements dont behave like ‘regular’ elements nor do all of them take all the CSS properties in ‘regular’ elements.

TRs, THEADs, TBODY, TFOOT, do not have take BG images. At best the BG gets passed to the TDs ( which do take the BG property).

For what I see of your code, you shouldn’t be having any problems, unless you arent using the correct path to your image file. Is your image in the same folder as your html file?

3

DP, I thought that was an IE bug? (I have been setting my bg colours etc on the td’s specifically for IE so I never noticed if tr’s couldn’t hold bg images)

4

zohaib82, there are 2 problems with your demo page.

First, as dresden_phoenix explained, the <tr> tag will not accept a background image. The background image should be applied to the <table> tag or the <td> tag(s). In the attached example, I have applied it to the <td> tag in the first <tr> using css.

Second, the image that you are using is VERY LARGE. So large that only a small portion of the top actually shows up in the title line. You might think that the image is not there, when it really IS. You can use css3 techniques to compress the image so it fits into the line, or you could draw another, MUCH SMALLER image that might do the same job. In any case, the attached image is much LARGER than it needs to be. I have added the css3 to fit the image into the small space; however it only works in the newest browsers, so a smaller background image would probably be a better option.

Hope this helps.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
http://www.sitepoint.com/forums/showthread.php?919880-Background-image-to-TR&p=5240659
2012.11.19 14:44
zohaib82

-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

tr:first-child td {
    background-color:#00FFFF;
    background-image:url("blueGradient.png");
    background-position:50% 50%;
    background-size:contain;
}

    </style>
</head>
<body>

<table width="100%" border="1">
    <tr>
        <td colspan="2" align="center">Title</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>
</html>
5

DP, I thought that was an IE bug?

nope. This was something I found out years ago… much to my chagrin. best way off seeing this is to use cell spacing and an OBVIOUSLY different image than used on the TABLE or TD tags. You would expect the BG of the TRs to cover the TABLE BG but alas, that would have been too convenient.

TDs automatically inherit the TRs BG so for something simple like a repeating pattern and a TD:hover one wouldn’t have noticed either. It’s only when you try to get all fancy-pantsy that the disappointment comes.

6

Many many thanks guys for help and support.

I got it working.

Just if I want to resize image what could be height and width . I have used Easy Thumbnails software to resize image.

zohaib.

7

Glad to hear you got it working.

Just if I want to resize image what could be height and width . I have used Easy Thumbnails software to resize image.

There is no “one size fits all” answer. The size depends on your page design, css, and the browsers that you wish to support… your needs, in other words. In general, you should strive to keep the images as small as practical to reduce page loading time and bandwidth. GIMP is a free image manipulation program with lots of features. With it, or something similar, you can resize or crop images to any size you wish. There are other such programs.