Is it possible to have two background images behind text?

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">&nbsp;</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">&nbsp;</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.