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..?

Answer 1

Check your image path correctly , a relative path should start like as below and give background url instead of background-image

background:url("../images/header-bg.gif");