Jonathan Jonathan - 3 months ago 7
CSS Question

Combine background-image with gradient using custom properties

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

You could try setting the background properties separately.

See this answer for more details: http://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.