Question 45463 in Html Question posted in
Some basic documentation can be found here.

How to add background image to a table header th cell – Html

I have a table in html and I want to add different background images to each <th> of the table, but the background image is not coming up

I tried by adding in following way

<tr>
  <th>Test table header</th>
  <th style="background: url("external url");" >Column 1 header <br/>How to</th>
  <th style="background: url("external url");" >Column 2 header <br/>How to</th>
</tr>

But the image is not coming up.
Tried below alternative as well

<th style="background-image: url("external url");" >Column 1 header <br/>How to</th>
Tags:

3

Answers


  1. 0

    Try simple quote instead of double quotes for the external url, because you’re style param already use double quotes :

    <tr>
  <th> Test table header </th>
    <th style="background: url('external url');" >Column 1 header <br/>How to</th>
 <th style="background: url('external url');" >Column 2 header <br/>How to</th>
</tr>
    Login or Signup to reply.
  2. 0

    It should work using ‘ instead of "

    <th style='background: url("external url");' >Column 2 header <br/>How to</th>

    Column 2 header
    How to

    Login or Signup to reply.
  3. 0

    Should be working with background-image: url(external url); without the quotes:

    <table>
  <tr>
    <th style="background-image: url(https://i.imgur.com/Q9GFjaY.jpeg);">Column 1 header <br/>How to</th>
    <th style="background-image: url(https://i.imgur.com/xohARva.png);">Column 2 header <br/>How to</th>
  </tr>
</table>

    If you still don’t see it maybe your cells should be bigger

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search