Search code examples
cssdatatableszurb-foundationdatatables-1.10zurb-foundation-5

Styling with Zurb Foundation 5.5.3 in Datatables, how do I allow both original background image and new image in the header?

I am trying to have images show in an extended width Datatables header. The styling is using Zurb Foundation 5.5.3 framework.

Please see site http://iprobesolutions.com/test2 which is using Zurb Foundation 5.5.3 CSS

The background images show up fine in this JS Fiddle so I don't know how to replicate the issue in a fiddle.

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;
}

According to Mozilla:

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

I don't know if this is the way to solve this problem. But even if it is, since the file https://cdn.datatables.net/1.10.13/css/dataTables.foundation.css is not hosted by me but pulled down from their CDN, how am I supposed to disable their original background image and consequently combine the two background images in one line of code ?

Solution

  • Thanks to my old front end teacher the following was clarified:

    table.dataTable thead .sorting appears to have roughly the same specificity as table.table1 thead .beyer. dataTables.foundation.css has been moved to now load before the datatables.css, table.table1 thead .beyer.