SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image to TR

    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.
    Code:
    <!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.
    Attached Images Attached Images

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code:
    <!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. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #6
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •