How to change color of background image via CSS?

Question

I'm trying to change color of an image via CSS. The image is an element of my website's layout. Here's screenshot showing the element: https://screenshots.firefox.com/xLCsVyZtSKLxFi9F/gameshunt.pl and here is an example post with the table - https://gameshunt.pl/promocje-na-gogu-2-05/

Its code looks like that:

table.tablesorter thead tr th {
    background-image: url(/wp-content/plugins/table-sorter/images/bg.gif);
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right center;
}

I tried background-image: #fff, background image: #fff, url (wp-content/etc) but nothing works. Does anyone have an idea how to change the color of this element? I can't just upload a different file because the color needs to be different only in dark mode.

try this `background: #fff url(/wp-content/plugins/table-sorter/images/bg.gif);` — Hammad tariq, May 02 '19 at 15:14
You can't. Background image is not an element, it's a property. — Paulie_D, May 02 '19 at 15:28
@Hammadtariq unfortunately it's not working properly. Check the screenshot: https://screenshots.firefox.com/n9dbsLUSvvbOtl1I/gameshunt.pl — kacper3355, May 02 '19 at 15:45
@ kacper3355 `background: #fff url(/wp-content/plugins/table-sorter/images/bg.gif) no-repeat;` — Hammad tariq, May 06 '19 at 11:03

score -1 · Answer 1 · answered May 02 '19 at 15:18

You could try making the arrows using CSS:

div {
  background: grey;
  padding: 5px;
}

.sort:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.sort:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-top: 3px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

.white:before {
  border-bottom: 5px solid white;
}

.white:after {
  border-top: 5px solid white;
}

<div class="sort"></div>
<div class="sort white"></div>

How to change color of background image via CSS?

1 Answers1