Image(logo) positioning on background image outlook
I want the logo(img) image positioned from left:20px, top:20px of the background image. And where should I set position:relative; of the background image for outlook? I am attaching 2 image of what it should look like and what it is now. I need your solution. Please answer with working code. Thanks in advance for your help.
Here is the code:
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#" class="hp"> <tr> <td background="http://i.imgur.com/wxiLDBs.jpg" bgcolor="#33ffff" width="600" class="hp" height="373" style="background-repeat:no-repeat; background-size:cover; background-position:left top; background-image:url('https://i.imgur.com/wxiLDBs.jpg'); width:600px; height:373px; position:relative;" valign="top"> <!--[if mso]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border:0; display:inline-block; width:450pt; height:279.75pt; position:absolute; behavior:url(#default#VML); top:0; left:0; z-index:1;" src="https://i.imgur.com/wxiLDBs.jpg"/> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border:0; display:inline-block; position:absolute; width:450pt; height:279.75pt; top:0; left:0; z-index:2;"> <v:fill opacity="0%" color="#33ffff" style="z-index:1;"/> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="ep"> <tr> <td valign="top"> <table width="100%" class="hp" cellspacing="0" cellpadding="0"> <tr> <th width="200" valign="top" style="font-size:0pt; line-height:0pt; margin:0; padding:0; font-weight:normal;" align="left" class="mob-column"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td style="font-size:0pt; line-height:0pt; text-align:left; padding:20px 0px 0px 0px;" class="condensed-p-t-logo"> <!--[if mso]> <a href="http://www.website.com"> <v:image xmlns:v="urn:schemas-microsoft-com:vml" src="https://i.imgur.com/lgjIkWA.png" style="top:20px; left:20px; z-index:3; position:relative; width:86.25pt; height:28.5pt;"/> </a> <![endif]--> <!--[if !mso]>--> <a href="http://www.website.com"> <img src="https://i.imgur.com/lgjIkWA.png" style="display:block; border:0px;" alt="Your logo"/> </a> <!--<![endif]--> </td> </tr> </table> </th> <th valign="top" style="font-size:0pt; line-height:0pt; margin:0; padding:0; font-weight:normal;" class="mob-column"> <table border="0" cellspacing="0" cellpadding="0" class="hp" width="100%"> <tr> <td valign="top" style="padding:30px 0px 0px 0px; text-align:right;" class="hide"> <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;" class="fallback-text-r" target="_blank"> <font face="'Roboto', Arial">Reservation</font> </a> <span style="color:#ffffff; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;"> <font face="'Roboto', Arial"> | </font> </span> <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;" class="fallback-text-r" target="_blank"> <font face="'Roboto', Arial">Recipes</font> </a> <span style="color:#ffffff; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;"> <font face="'Roboto', Arial"> | </font> </span> <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:inline-block;" class="fallback-text-r" target="_blank"> <font face="'Roboto', Arial">Contact</font> </a> </td> <!--[if !mso]>--> <td style="padding:25px 0px 0px 0px; text-align:left; display:none;" class="condensed-nav"> <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:block;" class="mobile-column-fallback-text-r"> <font face="'Roboto', Arial">| Reservation</font> </a> <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:block;" class="mobile-column-fallback-text-r"> <font face="'Roboto', Arial">| Recipes</font> </a> <a href="http://www.website.com" style="color:#ffffff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:15.43px; text-transform:uppercase; line-height:23.145px; display:block;" class="mobile-column-fallback-text-r"> <font face="'Roboto', Arial">| Contact</font> </a> </td> <!--<![endif]--> </tr> </table> </th> </tr> </table> </td> </tr> <tr valign="top"> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="ep" align="center"> <tr> <td style="font-family:'Parisienne', Arial; font-size:26px; color:#9933ff; padding:50px 0px 0px 0px; text-align:center; line-height:39px;" class="fallback-text-p"> <font face="'Parisienne', Arial">Prepare The Best Dishes</font> </td> </tr> <tr> <td style="font-family:'Montserrat', Arial; font-weight:900; font-size:32px; color:#ffffff; padding:10px 0px 0px 0px; text-align:center; text-transform:uppercase; line-height:48px;" class="fallback-text-m"> <font face="'Montserrat', Arial">Food when you want it</font> </td> </tr> <tr> <td style="font-family:'Roboto', Arial; font-weight:400; font-size:12.86px; color:#ffffff; padding:20px 0px 0px 0px; text-align:center; line-height:19.29px;" class="fallback-text-r"> <font face="'Roboto', Arial">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere.</font> </td> </tr> <tr> <td style="padding:28px 0px 35px 0px;"> <table border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <!--[if !mso]>--> <td> <a href="http://www.website.com" style="padding:12px 18px 12px 18px; border:2px solid #9933ff; background:transparent; color:#9933ff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:12.86px; line-height:19.29px; display:block;" class="fallback-text-r"> <font face="'Roboto', Arial">Read More</font> </a> </td> <!--<![endif]--> <!--[if mso]> <td style="padding:12px 18px 12px 18px; border:2px solid #9933ff; background:transparent;"> <a href="http://www.website.com" style="color:#9933ff; text-decoration:none; font-family:'Roboto', Arial; font-weight:400; font-size:12.86px; line-height:19.29px; display:block;" class="fallback-text-r"> <font face="'Roboto', Arial">Read More</font> </a> </td> <![endif]--> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> <!--[if mso]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table>
