Combine background-image with gradient using custom properties

Question

I want to have table headings with sorting-icons and a gradient as background-color.
The gradient has to use custom properties.

I tried the following scenarios:

1. background: url("../images/sort_both.png") no-repeat 100%, linear-gradient(top, #e16969 0%,#cc0101 100%);
   This creates the desired effect: gradient with sorting-icon
2. background: url("../images/sort_both.png") no-repeat 100%, linear-gradient(top, var(--verlauf_hell) 0%,var(--verlauf_dunkel) 100%);
   This creates grey cells without icons.
3. background: url("../images/sort_both.png") no-repeat 100%, linear-gradient(top, --var(--verlauf_hell) 0%, --var(--verlauf_dunkel) 100%);
   This gives the desired gradient, but no icons.

In another file is this code, which is working nicely everywhere else:

:root {
    --hauptfarbe_hell: #ff8080;
    --hauptfarbe_dunkel: #cc0000;
    --verlauf_hell: #ff0000;
    --verlauf_dunkel: #960000;
}

So, my question is how can I fix this? As I am understanding custom properties, I used them correctly in the second example.

Thanks in advance :)

Answer 1

You could try setting the background properties separately.

See this answer for more details: https://stackoverflow.com/a/2547064/5385381

:root {
  --hauptfarbe_hell: #ff8080;
  --hauptfarbe_dunkel: #cc0000;
  --verlauf_hell: #ff0000;
  --verlauf_dunkel: #960000;
}
    
td {
  background-repeat: no-repeat;
  background-color: var(--verlauf_hell);
  background-image: url("../images/sort_both.png");
  /* fallback */
  background-image: url("../images/sort_both.png"), linear-gradient(var(--verlauf_hell) 0%, var(--verlauf_dunkel) 100%);
  /* W3C */
}
    
    
table {
  width:100%;
}

<table>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <table>

Note: You should consider using LESS or SASS instead of CSS variables for a more widely supported solution.