Jquery Datatable Icon hidden because of table background

Question

I'm using the below css for my table header and since I'm using an image as the header colour, the sort icon is behind it. How can I display the sort icon on top of the image?

th {
  background: url(https://jackrugile.com/images/misc/noise-diagonal.png), 
  linear-gradient(#777, #444) !important;
  border-left: 1px solid #555 !important;
  border-right: 1px solid #777 !important;
  border-top: 1px solid #555 !important;
  border-bottom: 1px solid #333 !important;
  box-shadow: inset 0 1px 0 #999 !important;
  color: #fff !important;
  font-weight: bold !important;
  padding: 10px 15px !important;
  position: relative !important;
  text-shadow: 0 1px 0 #000 !important;
  line-height: 14px !important;
}

I tried following css but with no luck:

table.dataTable thead span.sort-icon {
 display: inline-block!important;
 padding-left: 5px!important;
 width: 16px!important ;
 height: 16px!important    

}

 table.dataTable thead .sorting span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_both.png') no-repeat center right!important; }
 table.dataTable thead .sorting_asc span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png') no-repeat center right!important; }
 table.dataTable thead .sorting_desc span { background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png') no-repeat center right!important; }

Answer 1

No, the sort icon is not behind it if you are using default styling DataTable. In fact, you are overriding the sort icon with your background image, because with the default styling the sorting images are background images - and thus have no concept of the content.

So if you want to customize header, you should use styling extension for dataTable.

The following snippet is using jQuery UI styling

$(document).ready(function() {
  $('#example').DataTable();
});

th {
  background: url(https://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444) !important;
  color: #fff !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.15/datatables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.15/datatables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Michael Bruce</td>
      <td>Javascript Developer</td>
      <td>Singapore</td>
      <td>29</td>
      <td>2011/06/27</td>
      <td>$183,000</td>
    </tr>
    <tr>
      <td>Donna Snider</td>
      <td>Customer Support</td>
      <td>New York</td>
      <td>27</td>
      <td>2011/01/25</td>
      <td>$112,000</td>
    </tr>
  </tbody>
</table>