How to have background gradient and background image at the same time?

Question

Short Version

How do i have both:

background-color: linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%);
background-image: url(sort_asc.png);

at the same time?

Long Version

I have styled a table the way i want; with a vertical linear gradient in the header:

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

<table class="datatable">
  <thead>
    <tr>
      <th>Name</th>
      <th class="sorting_asc">Date modified</th>
      <th>Type</th>
      <th>Size</th>
  </thead>
  <tbody>
    <tr>
      <td>explorer.exe</td>
      <td>1/20/2022 11:50 AM</td>
      <td>Application</td>
      <td>4,855 KB</td>
    </tr>
</table>

Convert to DataTable

Now, as suggested i'm trying to convert the table into a DataTable (https://datatables.net/index). I want the sorting, searching, and sort arrows that DataTable tries to include. When it does, it adds a new CSS entry for the thead:

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

This background-image breaks the background gradient that is already there:

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

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

<table class="datatable">
  <thead>
    <tr>
      <th>Name</th>
      <th class="sorting_asc">Date modified</th>
      <th>Type</th>
      <th>Size</th>
  </thead>
  <tbody>
    <tr>
      <td>explorer.exe</td>
      <td>1/20/2022 11:50 AM</td>
      <td>Application</td>
      <td>4,855 KB</td>
    </tr>
</table>

So the question is then:

how can i make my background
coexist with someone else's background-image

So they both operate at the same time?

Note: I'm sure there are techniques to fake sort arrows (adding extra text to the TH element, using a bevelled border to make it look like an arrow, etc.) Those may be solutions to my problem, but not my question:

how to have background gradient
and background image

given that i can't merge them into one:

background: url("sort_asc.png") no-repeat center right, linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%);

score 2 · Accepted Answer · answered Jan 24 '22 at 20:35

Use pseudo element:

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

table.datatable thead .sorting_asc {
  position:relative;
  z-index:0;
}
table.datatable thead .sorting_asc:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background-image: url("https://cdn.datatables.net/1.11.4/images/sort_asc.png") !important;
  background-repeat: no-repeat;
  background-position: center right;
}

<table class="datatable">
  <thead>
    <tr>
      <th>Name</th>
      <th class="sorting_asc">Date modified</th>
      <th>Type</th>
      <th>Size</th>
  </thead>
  <tbody>
    <tr>
      <td>explorer.exe</td>
      <td>1/20/2022 11:50 AM</td>
      <td>Application</td>
      <td>4,855 KB</td>
    </tr>
</table>

How to have background gradient and background image at the same time?

Short Version

Long Version

Convert to DataTable

1 Answers1