How to set background-image above background-color

Question

I want to set background-image above the background-color (the background-image is a line). See codepen and snippet:

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5rem !important;
  display: inline-block;
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

Answer 1

Note that instead of setting background on two classes you can set it in .class2 itself by using background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x, red (the image mentioned first will be stacked over the red background mentioned last) - see demo below:

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  padding: 10px; /* for illustration */
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x,
              red; /* changed*/
  border-radius: 5rem !important;
  display: inline-block;
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

---

Solution

If you want to have the background image to extend over the full td, one option is to use radial-gradient for the red circle and combining it with background-image for the line. Note that here the text is above the red background color and the line:

table {
border-collapse: collapse;
}

table, td{
border: 1px solid black;
}

td.class1 {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x,
              radial-gradient(farthest-side,red 70%, transparent 72%);
  background-position: center;
  text-align: center;
  color: #fff;
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

---

If you want a strikethrough effect , you could place the line background-image over the <span> background and text, by use negative z-index on the <span> - see demo below:

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 {
  padding: 10px; /* for illustration */
  background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
  background-position: center;
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5rem !important;
  display: inline-block;
  position: relative; /* added */
  z-index: -1; /* added */
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>

Yet another option for the strikethrough effect is using a pseudo element so that you don't have to mess with z-index - see demo below:

table {
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

td.class1 { /* added */
  padding: 10px; /* for illustration */
  position: relative;
}

td.class1:after { /* added */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
  background-position: center; /* added */
}

.class2 {
  text-align: center;
  color: #fff;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5rem !important;
  display: inline-block;
}

<table>
  <tr>
    <td>S</td>
    <td>B</td>
  </tr>
  <tr>
    <td>S</td>
    <td class="class1">
      <span class="class2">S</span>
    </td>
  </tr>
</table>