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) 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

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,