WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Table Backgrounds (3 posts)

  1. Y2Neildotcom
    Member
    Posted 1 year ago #

    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,

  2. vtxyzzy
    Member
    Posted 1 year ago #

    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?

  3. Y2Neildotcom
    Member
    Posted 1 year ago #

    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,

Topic Closed

This topic has been closed to new replies.

About this Topic