JQuery tablesorter background image issue

Question

I've implemented JQuery tablesorter from http://tablesorter.com/docs/.

The sorting part works fine but I'm having trouble getting the background images into the table headers.

HTML table code:

echo '<table id="viewAll" class="tablesorter">';
            echo '<thead>';
            echo '<tr>';
            echo '<th>Product</th>';
            echo '<th>PBI</th>';
                echo '<th>Status</th>';
            echo '<th>Summary</th>';
            echo '<th>Record Created</th>';
            echo '<th>Record Updated</th>';

            echo '</tr>';
            echo '</thead>';

The CSS code for getting the background image:

table.tablesorter thead tr  .header {
    background-image: url(images/tablesorter/bg.gif);
    background-repeat: no-repeat;
    background-position: left top;
    cursor: pointer;
}

As I said the sorting works fine, I can get the cursor pointer but just can't seem to get the background image on.

What am i missing..?

ichigolas ichigolas · Accepted Answer · 2012-11-01T04:47:48

I get the feeling the css selector is bad. Depending on what you want to put background to, the <thead> or each <th> this may do the trick http://jsfiddle.net/MVCmx/1/. Also, check that the image url is actually referencing to something on your app, the image path may be bad.

table.tablesorter > thead {
  background-image: url('yourimagepath')
}

JQuery tablesorter background image issue

3 Answers