css style - background color with image overlay on html table

Question

I am trying to have a image, dynamically, overlay a table, that is opacity half filled so it is a little transparent, but I cannot even get the image to display over the color of the cells... I'm trying to do that first, then I'll add the code to the opacity.

Can you please tell me what I did wrong?

The CSS is in a file, but this is for an invoice, I want to overlay an image that shows paid, refunded, voided, pending, etc.

Here is the short CSS for this invoice:

        .clearfix:after {
          content: "";
          display: table;
          clear: both;
        }

        a {
          color: #5D6975;
          text-decoration: underline;
        }

        .fbody {
          position: relative;
          width: 21cm;  
          height: 29.7cm; 
          margin: 0 auto; 
          color: #001028;
          background: #FFFFFF; 
          font-family: Arial, sans-serif; 
          font-size: 12px; 
          font-family: Arial;
          border-style: solid;
          border-width: 1px;
          border-color: #001028;
        }

        header {
          padding: 10px 0;
          margin-bottom: 30px;
        }

        div.logo {
          text-align: center;
        }

        //.logo img {
        //  width: 90px;
        //}

        .th1 {
          border-top: 1px solid  #5D6975;
          border-bottom: 1px solid  #5D6975;
          color: #5D6975;
          font-size: 2.4em;
          line-height: 1.4em;
          font-weight: normal;
          text-align: center;
          margin: 0 0 20px 0;
          background: url('/images/2.0/dimension.png');
        }

        #project {
          float: left;
          margin-left: 20px;
        }

        #project span {
          color: #5D6975;
          text-align: left;
          width: 52px;
          margin-left: 20px;
          display: inline-block;
          font-size: 1em;
        }

        #tcompany {
          margin-right: 20px;
          float: right;
          text-align: right;
        }

        #tcompany span {
          color: #5D6975;
          text-align: right;
          width: 52px;
          margin-right: 30px;
          display: inline-block;
          font-size: 1em;
        }

        #project div,
        #tcompany div {
          white-space: nowrap;        
        }

        .ttable {
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
          margin-bottom: 20px;
        }

        .ttable tr:nth-child(2n-1) td {
          background: #F5F5F5;
          color: #000000;
          z-index: -1;
        }

        .ttable th,
        .ttable td {
          text-align: center;
          color: #000000;
        }

        .ttable th {
          padding: 5px 20px;
          color: #000000;
          border-bottom: 1px solid #C1CED9;
          white-space: nowrap;        
          font-weight: normal;
        }

        .ttable .service,
        .ttable .desc {
          text-align: left;
        }

        .ttable td {
          padding: 10px;
          text-align: right;
          color: #000000;
        }

        .ttable td.service,
        .ttable td.desc {
          vertical-align: top;
          color: #000000;
        }

        .ttable td.unit,
        .ttable td.qty,
        .ttable td.total {
          font-size: 1.2em;
          color: #000000;
        }

        .ttable td.grand {
          border-top: 1px solid #5D6975;
          color: #000000;
        }

        // Shipment section
        #toptable #billto {
            padding-left: 10px;
            margin-left: 10px;
            margin-top: 0px;
            padding-top: 0px;
          vertical-align: top;
          color: #000000;
        }

        #toptable #shipto {
            padding-left: 10px;
            margin-right: 10px;
            margin-left: 10px;
            padding-right: 10px;
            padding-top: 0px;
            margin-top: 0px;
          vertical-align: top;
          color: #000000;
        }

        #toptable .stable {
            text-align: center;
          padding: 0px;
          color: #000000;
        }

        #toptable .stable2 {
            text-align: center;
          padding: 0px;
          background: #EAFFEA;
          color: #000000;
        }

        #toptable .stableheader {
            font-weight: bold;
            border-bottom: 1px; solid #5D6975;
          background: #C0C0C0;
          color: #000000;
          text-align: center;
          font-size: 1.3em;
          height: 10px;
          padding-top: 5px;
          padding-bottom: 5px;
        }

        #notices .noticeheader {
            color: #5D6975;
          font-size: 1.5em;
          margin-left: 20px;
        }

        #notices .notice {
          color: #5D6975;
          font-size: 1.2em;
          margin-left: 20px;
        }

        footer {
          color: #5D6975;
          width: 100%;
          height: 30px;
          position: absolute;
          bottom: 0;
          border-top: 1px solid #C1CED9;
          padding: 8px 0;
          text-align: center;
        }

Of course the path would require the domain, I took it off though, because it is behind a login page. (Edited, I went and uploaded it to a forum image hosting site)

Here is the HTML that is output by the programming. The Style inside of the table tag is what is built dynamically based upon the status of the invoice.

  <table class="ttable" style="background: url('http://s10.postimg.org/d2nvpi7eh/refunded.gif'); z-index: 1; background-repeat: no-repeat; background-position: center;">
      <tr>
        <th class="service">Item Number</th>
        <th class="desc">Product Name</th>
        <th>Unit Price</th>
        <th>QTY</th>
        <th>TOTAL</th>
      </tr>
    <tbody>
        <tr><td class="service">PackageSKU</td> <td class="desc">Item Name / Short Desc</td> <td class="unit">$5.00</td> <td class="qty">1</td> <td class="total">$5.00</td></tr><tr><td class="service">&nbsp;</td> <td class="desc">&nbsp;</td> <td class="unit">&nbsp;</td> <td class="qty">&nbsp;</td> <td class="total">&nbsp;</td></tr><tr><td class="service">&nbsp;</td> <td class="desc">&nbsp;</td> <td class="unit">&nbsp;</td> <td class="qty">&nbsp;</td> <td class="total">&nbsp;</td></tr>
      <tr>
        <td colspan="4">SUBTOTAL</td>
        <td class="total">$5.00</td>
      </tr>
      <tr>
        <td colspan="4">Shipping and Handling</td>
        <td class="total">$1.95</td>
      </tr>
      <tr>
        <td colspan="4">TAX</td>
        <td class="total">$0.00</td>
      </tr>
      <tr>
        <td colspan="4" class="grand total">GRAND TOTAL</td>
        <td class="grand total">$6.95</td>
      </tr>
    </tbody>
  </table>

See, I tried to use the z-index, but it is not working.

The every other line has the background color in the css file, and it appears over the image. The lines that do not have a background color, I can see the image, it just is not on top of the color.

Can you see how I need to fix it?

Edited again, I added a jsfiddle: http://jsfiddle.net/bizactuators/je26zszu/ sorry, the other one was not mine, had to register.

Answer 1

Another solution is to use negative z-index to td with background color:

.ttable tr:nth-child(2n-1) td {
    background: #F5F5F5;
    color: #000000;
    position: relative;/*Add position relative*/
    z-index: -1;/*Add negative z-index*/
}

.clearfix:after {
    content:"";
    display: table;
    clear: both;
}
a {
    color: #5D6975;
    text-decoration: underline;
}
.fbody {
    position: relative;
    width: 21cm;
    height: 29.7cm;
    margin: 0 auto;
    color: #001028;
    background: #FFFFFF;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-family: Arial;
    border-style: solid;
    border-width: 1px;
    border-color: #001028;
}
header {
    padding: 10px 0;
    margin-bottom: 30px;
}
div.logo {
    text-align: center;
}
//.logo img {
    // width: 90px;
    //
}
.th1 {
    border-top: 1px solid #5D6975;
    border-bottom: 1px solid #5D6975;
    color: #5D6975;
    font-size: 2.4em;
    line-height: 1.4em;
    font-weight: normal;
    text-align: center;
    margin: 0 0 20px 0;
    background: url('/images/2.0/dimension.png');
}
#project {
    float: left;
    margin-left: 20px;
}
#project span {
    color: #5D6975;
    text-align: left;
    width: 52px;
    margin-left: 20px;
    display: inline-block;
    font-size: 1em;
}
#tcompany {
    margin-right: 20px;
    float: right;
    text-align: right;
}
#tcompany span {
    color: #5D6975;
    text-align: right;
    width: 52px;
    margin-right: 30px;
    display: inline-block;
    font-size: 1em;
}
#project div, #tcompany div {
    white-space: nowrap;
}
.ttable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
    
}

table.ttable{
    background: url('http://s10.postimg.org/d2nvpi7eh/refunded.gif');
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
}

.ttable tr:nth-child(2n-1) td {
    background: #F5F5F5;
    color: #000000;
    position: relative;
    z-index: -1;
}
.ttable th, .ttable td {
    text-align: center;
    color: #000000;
}
.ttable th {
    padding: 5px 20px;
    color: #000000;
    border-bottom: 1px solid #C1CED9;
    white-space: nowrap;
    font-weight: normal;
}
.ttable .service, .ttable .desc {
    text-align: left;
}
.ttable td {
    padding: 10px;
    text-align: right;
    color: #000000;
}
.ttable td.service, .ttable td.desc {
    vertical-align: top;
    color: #000000;
}
.ttable td.unit, .ttable td.qty, .ttable td.total {
    font-size: 1.2em;
    color: #000000;
}
.ttable td.grand {
    border-top: 1px solid #5D6975;
    color: #000000;
}
// Shipment section #toptable #billto {
    padding-left: 10px;
    margin-left: 10px;
    margin-top: 0px;
    padding-top: 0px;
    vertical-align: top;
    color: #000000;
}
#toptable #shipto {
    padding-left: 10px;
    margin-right: 10px;
    margin-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    margin-top: 0px;
    vertical-align: top;
    color: #000000;
}
#toptable .stable {
    text-align: center;
    padding: 0px;
    color: #000000;
}
#toptable .stable2 {
    text-align: center;
    padding: 0px;
    background: #EAFFEA;
    color: #000000;
}
#toptable .stableheader {
    font-weight: bold;
    border-bottom: 1px;
    solid #5D6975;
    background: #C0C0C0;
    color: #000000;
    text-align: center;
    font-size: 1.3em;
    height: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
#notices .noticeheader {
    color: #5D6975;
    font-size: 1.5em;
    margin-left: 20px;
}
#notices .notice {
    color: #5D6975;
    font-size: 1.2em;
    margin-left: 20px;
}
footer {
    color: #5D6975;
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #C1CED9;
    padding: 8px 0;
    text-align: center;
}

table.ttable > tr > td{
    position: relative;
    z-index: -1;
}

<table class="ttable">
    <tr>
        <th class="service">Item Number</th>
        <th class="desc">Product Name</th>
        <th>Unit Price</th>
        <th>QTY</th>
        <th>TOTAL</th>
    </tr>
    <tbody>
        <tr>
            <td class="service">PackageSKU</td>
            <td class="desc">Item Name / Short Desc</td>
            <td class="unit">$5.00</td>
            <td class="qty">1</td>
            <td class="total">$5.00</td>
        </tr>
        <tr>
            <td class="service">&nbsp;</td>
            <td class="desc">&nbsp;</td>
            <td class="unit">&nbsp;</td>
            <td class="qty">&nbsp;</td>
            <td class="total">&nbsp;</td>
        </tr>
        <tr>
            <td class="service">&nbsp;</td>
            <td class="desc">&nbsp;</td>
            <td class="unit">&nbsp;</td>
            <td class="qty">&nbsp;</td>
            <td class="total">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">SUBTOTAL</td>
            <td class="total">$5.00</td>
        </tr>
        <tr>
            <td colspan="4">Shipping and Handling</td>
            <td class="total">$1.95</td>
        </tr>
        <tr>
            <td colspan="4">TAX</td>
            <td class="total">$0.00</td>
        </tr>
        <tr>
            <td colspan="4" class="grand total">GRAND TOTAL</td>
            <td class="grand total">$6.95</td>
        </tr>
    </tbody>
</table>

Answer 2

I fix this try

.ttable tr:nth-child(2n-1) td {
  background: transparent;
  color: #000000;
}

Right?

Answer 3

If you want to do that, you'll have to, as you correctly said, create an overlay. Something like this will do:

<div style="position: absolute;">
<div style="width: 100%; height: 100%; background-color: #000; opacity: 0.4; position: absolute; z-index: 10;"></div>
<table>
    <thead><tr><th style="background-color: #f00;">Test<th></tr></thead>
    <tbody>
        <tr><td style="background-color: #f00;">Muh</td></tr>
        <tr><td style="background-color: #f00;">Möp</td></tr>
        <tr><td style="background-color: #f00;">Mäh</td></tr>
        <tr><td style="background-color: #f00;">Muh</td></tr>
        <tr><td style="background-color: #f00;">Möp</td></tr>
        <tr><td style="background-color: #f00;">Mäh</td></tr>
    </tbody>
</table>
</div>