title: Jquery Datatable Icon hidden because of table background
body: <p>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?</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I tried following css but with no luck:</p>
  
  <pre><code>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; }
  </code></pre>