Hi folks,
I'm trying to create a table with a background image using CSS and my Wordpress theme is Graphene. I've created a child theme (which for the purposes of this exercise, I've removed everything out of the stylesheet).
When I save the following code as a simple HTML file and open it - it works. When I put it into a page on my site, the background does not show.
Can anyone suggest why this might be?
Many thanks,
<!DOCTYPE html>
<html>
<head>
<style>
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-color: #ffffff;
width:100%;
border-collapse:collapse;
background-image:url('http://www.hornetsfc.com/wp-content/uploads/2013/08/grass_repeat2.jpg');
background-repeat:repeat-x;
}
#customers td, #customers th
{
font-size:1em;
border:0px solid #ffffff;
padding:3px 7px 2px 7px;
text-align:center;
}
#customers th
{
font-size:1.1em;
text-align:center;
padding-top:5px;
padding-bottom:4px;
background-color:#000000;
font-color:#ffffff;
}
#score
{
text-align:center;
color:black;
font: bold 36px arial;
background: #FFFF00;
}
#teamname
{
color:#ffff00;
background:#000000;
font-size:200%;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th colspan=4 align=center>Friendly</th>
</tr>
<tr>
<td><div id="teamname">Hornets FC</div></td>
<td><div id="score">4</div></td>
<td><div id="score">0</div></td>
<td><div id="teamname">GDL Athletic</div></td>
</tr>
<tr>
<td colspan=2>David Jenkinson</td>
<td colspan=2>Adam Sadler (Booked)</td>
</tr>
<tr>
<td colspan=2>David Jenkinson</td>
<td colspan=2></td>
</tr>
<tr>
<td colspan=2>David Jenkinson</td>
<td colspan=2></td>
</tr>
<tr>
<td colspan=2>David Jenkinson</td>
<td colspan=2></td>
</tr>
<tr>
<th colspan=4 align=center>Played at: Martley</th>
</tr>
</table>
</body>
</html>