Title: Table Backgrounds
Last modified: August 20, 2016

---

# Table Backgrounds

 *  Resolved [Y2Neildotcom](https://wordpress.org/support/users/y2neildotcom/)
 * (@y2neildotcom)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/table-backgrounds/)
 * Hello all,
 * I’m sure this is simple CSS but I’m not very good at that I’m afraid.
 * I currently have nested tables but I want the background to be an image. At the
   moment the background is just solid white.
 * The page in question is:
 * I want an image of the football pitch in the background of the top table ([http://www.hornetsfc.com/wp-content/uploads/2012/09/Football_02.jpeg](http://www.hornetsfc.com/wp-content/uploads/2012/09/Football_02.jpeg))
   and then for the nested tables, the background to be clear to show the background
   of the main table.
 * The page in question is here: [http://www.hornetsfc.com/match-test/?id=359](http://www.hornetsfc.com/match-test/?id=359)
 * The code I’m using is:
 *     ```
       echo "<table style='background: url(http://www.hornetsfc.com/wp-content/uploads/2012/09/Football_02.jpeg)' width='40%' align='right' valign='top' cellspacing='0' cellpadding='0' border-'0' background='http://www.hornetsfc.com/wp-content/uploads/2012/09/Football_02.jpeg'><tr><th>Starting XI</th></tr><tr><td>";
       echo "<table style='background: url(http://www.hornetsfc.com/wp-content/uploads/2012/09/Football_02.jpeg)' width='100%' align='center' valign='top' cellspacing='0' cellpadding='0' border='0'>";
       echo "<tr>";
       while($row = mysql_fetch_array($gk))
         {
         echo "<td align=\"center\" valign=\"top\"><img src=\"http://www.hornetsfc.com/images/players/faces/" . $row['Name'] . ".jpeg\">";
         echo "<p>" . $row['Surname'] . " ";
         if ($row['Off']==0) { echo "</p>"; }
         else { echo "(" . $row['Off'] . ")</p>"; }
         if ($row['Yellow']==1) { echo "<p><img height=\"15\" src=\"http://www.hornetsfc.com/images/yellow/" . $row['Yellow'] . ".gif\"/>"; }
         elseif ($row['Red']==1) { echo "<p><img height=\"15\" src=\"http://www.hornetsfc.com/images/red/" . $row['Red'] . ".gif\"/>";}
         else {echo "</p>";}
         }
       echo "</td></tr>";
       echo "</table>";
       ```
   
 * The CSS is currently:
 *     ```
       sqdtable {
         border-collapse: collapse;
         background: url(http://www.hornetsfc.com/wp-content/uploads/2012/09/Football_02.jpeg);
       }
       sqdtable td,
       sqdtable th,
       sqdtable tr {
         border: 0px solid #ccc;
         font-family: arial;
         padding: 0px 0px;
       }
       sqdtable th {
         background: url(http://www.hornetsfc.com/wp-content/uploads/2012/03/bg-sidebar-h3.png);
         border-bottom-width: 0px;
       }
       sqdtable tr {
       /*   background: #fff; */
   
       }
       sqdtable tr.alternate {
         background: #d8d8d8;
       }
       sqdtable tr.alternate2 {
         background: #eeeeee;
       }
       sqdtable#wp-calendar td,
       sqdtable#wp-calendar th,
       sqdtable#wp-calendar tr {
         border: none;
       }
       table {
         border-collapse: collapse;
       }
       table td,
       table th,
       table tr {
         border: 0px solid #ccc;
         font-family: arial;
         padding: 0px 0px;
       }
       table th {
         background: url(http://www.hornetsfc.com/wp-content/uploads/2012/03/bg-sidebar-h3.png);
         border-bottom-width: 0px;
       }
       table tr {
          background: #fff;
       }
       table tr.alternate {
         background: #d8d8d8;
       }
       table tr.alternate2 {
         background: #eeeeee;
       }
       table#wp-calendar td,
       table#wp-calendar th,
       table#wp-calendar tr {
         border: none;
       }
       ```
   
 * So I understand that the CSS is setting the table background to white, but when
   I remove this, it sets it to grey, not clear.
 * Any help is greatly apprecaited.
 * Many thanks,

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [vtxyzzy](https://wordpress.org/support/users/vtxyzzy/)
 * (@vtxyzzy)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/table-backgrounds/#post-3052866)
 * I am confused. The CSS you showed relates to sqdtable, but there is no sqdtable
   in the code or in the source of the page whose link you gave.
 * Can you please explain?
 *  Thread Starter [Y2Neildotcom](https://wordpress.org/support/users/y2neildotcom/)
 * (@y2neildotcom)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/table-backgrounds/#post-3052868)
 * Apologies, I missed that out.
 * I have since been able to fix the problem in a fashion. I split the image up 
   into chunks of 100px’s in height, set the <tr> to have a height of 100px and 
   set the background as the image.
 *     ```
       echo "<table width='100%' align='center' valign='top' cellspacing='0' cellpadding='0' border='0'>";
       echo "<tr height=\"100px\" style=\"background: url(http://www.hornetsfc.com/images/fwpitch.jpeg)\">";
       ```
   
 * I had to use the style tags in order to get the image to display.
 * Many thanks,

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Table Backgrounds’ is closed to new replies.

## Tags

 * [background](https://wordpress.org/support/topic-tag/background/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [table](https://wordpress.org/support/topic-tag/table/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [Y2Neildotcom](https://wordpress.org/support/users/y2neildotcom/)
 * Last activity: [13 years, 11 months ago](https://wordpress.org/support/topic/table-backgrounds/#post-3052868)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics