Changing the background image for only part of a table - html

Question

I am trying to change the background image for only part of the table, specifically the first two td elements and leave the third unchanged. I've tried wrapping the first two td in a div and changing the background image of the div but that didn't work.
I've look around elsewhere on the site and I couldn't seem to find anything similar to this question. Here is the code I have:
<div height='200px' width='600px'>
<table width='100%' style='display: inline-block; float: left; border-collapse: collapse; background-image: url(http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/f1501c18-c3db-4fcd-818b-45d6199cc2e0.jpg'>
<tr>
<td width='33%' style='vertical-align: top; padding: 20px'><img src="http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/1c64a1a7-519b-406a-8f29-6944c179a86f.png" alt="Anniversery badge"> </td>
<td align='left' width='33%' style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 25px; line-height: 22px; padding: 20px; background-color: rgba(166, 208, 237, 0.65); font-weight: bold">GLORIES OF GREECE<br><br><br>
<font style="font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 15px;"> 8 days <br>
<div align='center'> <button> EXPLORE NOW </button> </div>
</font>
</td>
<td width='34%' align='left' bgcolor="#081e3f" style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 1.5; padding: 20px">This popular journey covers a multitude of noteworhty ancient sitesm majestic monuments and mystical monasteries</td>
</tr>
</table>
</div>

Answer 1

Wrap there two tds into table and apply background to table.
Codepen demo.
<div height='200px' width='600px'>
<table width='100%' style='display: inline-block; float: left; border-collapse: collapse;'>
<tr>
<td width='66%' style='background-image: url(http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/f1501c18-c3db-4fcd-818b-45d6199cc2e0.jpg'>
<table width='100%'>
<tr>
<td width="50%" style="vertical-align: top; padding: 20px;">
<img src="http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/1c64a1a7-519b-406a-8f29-6944c179a86f.png" alt="Anniversery badge">
</td>
<td align='left' width='50%' style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 25px; line-height: 22px; padding: 20px; background-color: rgba(166, 208, 237, 0.65); font-weight: bold">
GLORIES OF GREECE
<br>
<br>
<br>
<font style="font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 15px;">
8 days <br>
<div align='center'> <button> EXPLORE NOW </button> </div>
</font>
</td>
</tr>
</table>
</td>
<td width='34%' align='left' bgcolor="#081e3f" style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 1.5; padding: 20px">This popular journey covers a multitude of noteworhty ancient sitesm majestic monuments and mystical monasteries</td>
</tr>
</table>
</div>