Background Image on

Question

I have a table that has 13 columns and an unknown number of rows, could be 1, could be 50+. The table is also wrapped in a scroll wrapper so that only 4 rows are visible at a time. Some of the rows need to have a background image of text "EXPIRED" that spans the entire row.

I have tried many different ways to try and solve this and have yet to find a solution that works.

W3C says you cannot place a background image on a <TR> tag. That needs to change.

One solution I tried was placing a <div> inside the first <td> and using CSS to absolutely position it:

<table style="empty-cells:show" class="wiTable">
<tr><td><div class="expired"></div></td>
</table>

.expired {
    background:url("/images/Expired.png") no-repeat left top;
    position: absolute;
    left: 0;
    width: 900px;
    height: 26px;
    z-index: 0;
}

This worked up to a point. The problem is it also placed the image on the rows that were hidden by the scroll wrapper and the images did not scroll with the table.

I thought I could also break the image up into segments and place them in the individual cells, but that won't work because I need it on several tables and the cells are not a fixed width across the tables.

Oh, This needs to work in IE8 as that is the environment I am working with.

Here is an example of the absolute positioning result: Expired Example

Take a look at this, maybe it will help you: http://jeffri.me/2012/09/background-image-on-table-row/ — ctwheels, Aug 14 '14 at 16:01
Here is another way of accomplishing this: http://plexusweb.com/2013/04/need-a-background-image-on-a-table-row/ This method changes the background's position on the td and involves some tweaking to align it for the table row — ctwheels, Aug 14 '14 at 16:05

score 5 · Accepted Answer · answered Aug 14 '14 at 16:25

Using pseudo classes, you can do some trickery using the first-child TD instead of the TR. This also assumes your table has a fixed width and each row has a fixed height. This won't work with a fluid width, although, you could enter adjusted widths for certain media breakpoints if you wanted.

JS Fiddle Demo

Condensed HTML Markup

<div class="container">
    <table>
        <tr>
            <td>Model</td>
            <td>Make</td>
            <td>Miles</td>
            <td>Year</td>
            <td>Options</td>
            <td>Price</td>
        </tr>
        <tr class="expired">
            <td>Model</td>
            <td>Make</td>
            <td>Miles</td>
            <td>Year</td>
            <td>Options</td>
            <td>Price</td>
        </tr>
        <tr class="expired">
            <td>Model</td>
            <td>Make</td>
            <td>Miles</td>
            <td>Year</td>
            <td>Options</td>
            <td>Price</td>
        </tr>
    </table>
</div>

CSS

.container {
    overflow-y: scroll;
    height: 115px;
}

table {
    color: #fff;
    width: 500px;
    border-collapse: collapse;
}

table tr.expired {
    position: relative;
}

table tr.expired td:first-child:before {
    content: "";
    position: absolute;
    width: 500px;
    height: 30px;
    z-index: -100;
    top: 0;
    left: 0;
    /*background: red;*/
    background: url('http://lorempixel.com/output/nightlife-q-c-640-480-3.jpg');
}

table tr.expired td {
    z-index: 100;
    position: relative;
    background: transparent !important;
}

table tr td {
    padding: 5px;
    background: #999;
}

table tr:nth-child(odd) td {
    background: #ccc;
}

Thank you! This works perfect! I can't tell you how much googling I have done to try and get this to work. — Allen, Aug 14 '14 at 16:39
Generally speaking when trying to style a TR it is easier or more effective to figure out a way to style the TD's instead. They offer more versatility. The display property that a TR uses locks it down from being able to do a lot of things, and TD's aren't as restricted. Still, what I've done isn't perfect, as it relies on knowing your width and heights. Making it responsive would be very difficult if not impossible without javascript assistance. — Michael, Aug 14 '14 at 18:52

score 1 · Answer 2 · answered Mar 04 '15 at 13:20

I came up with a workaround for a fluid table. it involves inserting a 'dummy' row above the actual row, containing a single cell, which contains a div that renders the background image. The div uses a negative bottom-margin set to the height of the background image to overlap with the 'real' row below it. works pixel perfect in my example.

CSS:

tr.gradient td div{
    width: 100%;
    height: 28px;    
    margin: 0 0 -28px 0;
    background: #000 url(/pics/table_head.png) repeat-y top left;
    color: #FFF;
    background-size: 100%;
    padding:0;
}

HTML:

<table>
   <tr class="gradient"><td colspan="2"><div>&nbsp;</div></td></tr>
    <tr>
        <th>Strengths</th>
        <th>Weaknesses</th>
    </tr>
    <tr>
        <td>
            whatever</td>
        <td>
            whatever</td>
    </tr>
  <tr class="gradient"><td colspan="2"><div>&nbsp;</div></td></tr>
    <tr>
        <th>Opportunities</th>
        <th>Threats</th>
    </tr>
    <tr>
        <td>
            whatever</td>
        <td>
            whatever</td>
    </tr>
</table>

Background Image on

2 Answers2

Linked