Short Version
Is it possible to have both a background color with a linear gradient and a background image at the same time?
Long Version
I have styled a table with a vertical linear gradient in the header, as shown below:
table {
white-space: nowrap;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #7b9ebd;
}
th {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%);
font-weight: normal;
border-bottom: 1px solid #d5d5d5;
border-right: 1px solid #dedfe7;
text-align: left;
}
th.sorting_asc {
background: #dde9f6;
background: linear-gradient(180deg, #f4f8fc 0%, #f4f8fc 36%, #e7eff7 36%, #dde9f6 100%);
border-left: 1px solid #97d8fa;
border-right: 1px solid #97d8fa;
border-bottom: 1px solid #97d8fa;
}
th:hover {
background: #dde9f6;
background: linear-gradient(180deg, #e8f4ff 0%, #e8f4ff 36%, #c0e9ff 36%, #bbe4fd 100%);
border-right: 1px solid #6bb8e6;
border-bottom: 1px solid #99c6e3;
}
Convert to DataTable
I am trying to convert the table into a DataTable, as suggested here. I want the sorting functionality of DataTable which includes sort arrows. However, adding these features breaks the existing CSS for the headers, as shown here:
table.datatable thead .sorting_asc {
background-image: url("https://cdn.datatables.net/1.11.4/images/sort_asc.png") !important;
background-repeat: no-repeat;
background-position: center right;
}
The new background image added by DataTable conflicts with the existing background gradient in the headers.
The question is, how can I maintain both the background gradient and the background image simultaneously?
Note: While there are ways to fake sort arrows, such solutions do not address the core issue of having both a background gradient and a background image coexisting.
- How to have a background gradient
- And a background image
Given that combining them directly like this is not feasible:
background: url("sort_asc.png") no-repeat center right, linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%);