CODEWITHSUNDEEP
htmlcssbackground-image
Shawn
Shawn

Reputation: 3149

set background of html table's tr

I'd like to set the background of a table row. The background can be an image or CSS (preferably). I want it to look something like this, with opacity of the background:

enter image description here

I've tried it using a repeating image. Here is the image I'm using.

enter image description here

but it looks like this for some reason:

enter image description here

My HTML looks like this:

<table id="chPurchaseTable">
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Product</th>
            <th>u/m</th>
            <th>Price Each</th>
            <th>Line Total</th>
            <th></th>
        </tr>       
    </thead>
    <tbody>

and my CSS

#chPurchaseTable thead tr{
    background:url('../images/rarrows.png') repeat; 
}

How can I achieve this affect?

Upvotes: 1

Views: 76

Answers (1)

user7207170
user7207170

Reputation:

You need to make use of:

background: url('https://i.sstatic.net/jT3CO.png') repeat;
  background-size: contain; /*To make sure the entire image fits the container */


#chPurchaseTable thead tr {
  background: url('https://i.sstatic.net/jT3CO.png') repeat;
  background-size: contain;
  color: white;
}
<table id="chPurchaseTable">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Product</th>
      <th>u/m</th>
      <th>Price Each</th>
      <th>Line Total</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

To make the background transparent like you require, apply the background on a psuedoelement with opacity instead of on the actual tr:

#chPurchaseTable thead tr {
  color: red;
  position: relative;
}

#chPurchaseTable thead tr::before {
  content: '';
  width: 100%;
  height: 100%;
  background: url('https://i.sstatic.net/jT3CO.png') repeat;
  background-size: contain;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<table id="chPurchaseTable">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Product</th>
      <th>u/m</th>
      <th>Price Each</th>
      <th>Line Total</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

Upvotes: 3

Related Questions