Is it possible to have two background images behind text? - email

Question

I'm trying to achieve an email design where there's text over an image, but that table is on top of 2 background colors. I used a white space image for that effect but I think the outlook hack is not working because I'm using 2 background images.
Does anyone have an idea what I can do? Maybe a CSS trick for the white space?
This is what I want to see:
(https://ibb.co/fQzPSDV)
But my results are all over the place.
<table class="mktoModule module_wrapper m_header mktoModule module_wrapper m_header" id="header2" style="border-spacing: 0; border-collapse: collapse;" align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="module" style="mso-line-height-rule: exactly;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;word-break: break-word;background-image:https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png;padding-left: 0;background-position:top center;background-size:auto;background-color:#9078d7;padding-top: 0;padding-right: 0;padding-bottom: 0;background-repeat: repeat-x ;background:https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png;" valign="top" bgcolor="#9078d7" background="https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png">
<center>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px;height:120px">
<v:fill type="frame" src="https://campaign.yougov.com/rs/060-QFD-941/images/whitespace.png" color="#9078d7" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div><div style="font-size: 0;line-height: 0;margin: 0;border: 0">
<![endif]-->
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="module" style="mso-line-height-rule: exactly;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;word-break: break-word;background-image:https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg;padding-left: 0;background-position:top center;background-size:auto;background-color:#7C64C3;padding-top: 0;padding-right: 0;padding-bottom: 0;background-repeat: repeat-x ;background:https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg;" valign="top" bgcolor="#7C64C3" background="https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg">
<center>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="width:600px;height:300px">
<v:fill type="frame" src="https://campaign.yougov.com/rs/060-QFD-941/images/templatebg.jpg" color="#7C64C3" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<div><div style="font-size: 0;line-height: 0;margin: 0;border: 0">
<![endif]-->
<table>
<tbody>
<tr>
<td class="bgImgSpace" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; mso-line-height-rule: exactly; line-height: 155px; font-size: 155px;" height="155"> </td>
</tr>
<tr>
<td>
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
<tbody>
<tr>
<td class="primary-font title" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;text-align: left;font-family: Arial, sans-serif;font-weight: bold;font-size: 24px;border-collapse: collapse;line-height:26px;color:#ffffff;">
<div class="mktoText" id="heroText2">
Make money online through advertising
</div> </td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td class="bgImgSpace" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; mso-line-height-rule: exactly; line-height: 35px; font-size: 35px;" height="35"> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></div></div>
</v:textbox>
</v:rect>
<![endif]-->
</center> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></div></div>
</v:textbox>
</v:rect>
<![endif]-->
</center> </td>
</tr>
</tbody>
</table>
Thanks for anyone who can help.