Clickable background image in a td

[Viper²]

<td style="background: url()>
<a href="">
<img>
<span>Some text</span>
</a>
</td>

Does anyone know if it's possible to make the background image into a link? Been searching Google for ages without any luck!

Cheers

 

[Viper²]

Hmm. I tried that but couldn't get it to work.

Does it not have to be a background image in the td though? The <img> is a 2nd layer on top of it that, then the text on top of the 2nd layer. Struggling to come up with anything else though...

 

[Viper²]

Interesting, thanks.

The background image (as it is) is non-repeated and sizes are defined.

It's an email that I'm trying to code, hence the tables and I'm not sure if/how it'll handle an internal style sheet, I've only tried inline up to now. I'll give it a go though!

Thanks

(This is the code if you're interested!)

Spoiler

<table cellspacing="0" cellpadding="5" border="0" align="center" width="600">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<font face="Arial, Helvetica, sans-serif" color="#666666" size="1" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; font-weight:bold">
<b>Title 1</b>
</font>
<td style="background: url(http://i.imgur.com/s5mgP.jpg) no-repeat; background-size:165px 165px; padding: 2px 5px 5px 0px; float: left;" width="165px" height="165px">
<a href="Link 1" style="text-decoration:none;">
<img style="position:absolute;" src="http://i.imgur.com/5RoEo.png" border="0">
<span style="font-family: Arial, Helvetica, sans-serif; color: white; text-transform: uppercase; font-size: 12px; position:relative; top: 8px; left: 8px;">Text<br><span style="font-family: Arial, Helvetica, sans-serif; color: white; text-transform: uppercase; font-weight: bold; font-size: 16px; left:2px;">1</span></span>
</a>
</td>
<td align="left" width="42%" valign="top" style="padding-left:5px;">
<br>
<font face="Arial, Helvetica, sans-serif" color="#000000" size="2" style="font-family: Arial, Helvetica, sans-serif; font-size: 22px; color: #000000; font-weight:bold">
<b>Header</b>
<br>
</font>
<font face="Arial, Helvetica, sans-serif" color="#666666" size="1" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #666666;">
<b>Sub-Text</b>
</font>
<br><br>
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
Text 1
</font>
</td>
</tr>
</tbody>
</table>
</td>
<td><img style="height:150px; width:1px; margin-top:19px; margin-left:5px; margin-right:10px;" src="Separator.png"><br></td>
<td>
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<font face="Arial, Helvetica, sans-serif" color="#666666" size="1" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; font-weight:bold">
<b>Title 2</b>
</font>
<td style="background: url(http://i.imgur.com/s5mgP.jpg) no-repeat; background-size:165px 165px; padding: 2px 5px 5px 0px; float: left;" width="165px" height="165px">
<a href="Link 2" style="text-decoration:none;">
<img style="position:absolute;" src="http://i.imgur.com/5RoEo.png" border="0">
<span style="font-family: Arial, Helvetica, sans-serif; color: white; text-transform: uppercase; font-size: 12px; position:relative; top: 8px; left: 8px;">Text<br><span style="font-family: Arial, Helvetica, sans-serif; color: white; text-transform: uppercase; font-weight: bold; font-size: 16px; left: 2px;">2</span></span>
</a>
</td>
<td align="left" width="42%" valign="top" style="padding-left:5px;">
<br>
<font face="Arial, Helvetica, sans-serif" color="#000000" size="2" style="font-family: Arial, Helvetica, sans-serif; font-size: 22px; color: #000000; font-weight:bold">
<b>Header</b>
<br>
</font>
<font face="Arial, Helvetica, sans-serif" color="#666666" size="1" style="font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #666666;">
<b>Sub-Text</b>
</font>
<br><br>
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
Text 2
</font>
</td>
</tr>
</tbody>
</table>
</td>
</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>