Clickable background image in a td

Viper²

Viper²

Viper²

Soldato
Joined
3 Apr 2007
Posts
9,979
Code: 
<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
 
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...
 
Can you not have something like this in your html:

Code: 
<td class="td-background-image">
    <a href="/some/link/here">Link text</a>
</td>

then in your css:

Code: 
.td-background-image a {
    display: block;
    height: 100%;
    width: 100%;
    background-image: "foo/bar/someimage.png";
}

Would depend how you are setting the size of your table cells though and if the background image is something you want to repeat or to be displayed in it's entirety with no repeat I guess. If the latter, you could set a fixed size for that cell by selecting ".td-background-image td" or similarly for the link instead of 100% width and height. You could set the background image in the table cell instead if you've got padding in the cell or a margin set on the link and you want to cover those areas too with the image.

If the image is used purely for styling you should really use a background image but if it's part of the content it should be displayed with image tags.

I've not tried this out as I'm just theorising so don't blame me if it doesn't work. :p
 
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!)

Code: 
<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>
 
You must log in or register to reply here.
Back
Top Bottom