Search code examples
cssdatatableszurb-foundationzurb-foundation-6zurb-foundation-5

In Zurb Foundation 5.5.3 why is the background image CSS crossed out in the Datatables header?

I am trying to have images show in an extended width Datatables header. The styling is using Zurb Foundation 5.5.3 framework. Can anyone tell why this CSS is crossed out in this below image ? ( please check link to site http://iprobesolutions.com/test2 CSS which is using Zurb Foundation 5.5.3

The background images show up fine in this JS Fiddle

I've been trying to strip elements one by one but just can't figure out what's wrong with the CSS.

This is an example of the CSS for the background image:

table.table1 thead .beyer, 
#example table.dataTable thead .sorting_asc .beyer  {
background-image: url("https://placehold.it/264x140.jpg") no-repeat center        `center;
 height:264px;
 width:140px;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center top;
 height: 10rem;
 background-size: contain;
}
Solution

  • The image "https://cdn.datatables.net/1.10.13/images/sort_both.png" are already taking up space in the header and preventing the placehold.it images to show. When you uncheck the former, the latter starts to properly show per below red arrows in image