I am having issues with the background disappearing - not inverting, just fully going transparent. Its happening on mobile across gmail, outlook and seems to happen on outlook for desktop dark mode too.
I've tried changing the colour to a background image, no success tried making an entire mobile version of the row, no success
update: the below code seems to have fixed the mobile menu bar but not the gmail or outlook issues, and the footer bar is still inverting on mobile
See the email code below:
Menu Header Bar:
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fff; background-image: url(https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/Header%20Background.png); background-repeat: no-repeat; background-size: cover; border-bottom: 5px solid #06f; border-radius: 0; width: 600px; margin: 0 auto;" width="600">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 20px; padding-left: 20px; padding-right: 10px; padding-top: 20px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="66.66666666666667%">
<table border="0" cellpadding="20" cellspacing="0" class="image_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad">
<div align="left" class="alignment" style="line-height:10px"><a href="https://blackbull.com" style="outline:none" tabindex="-1" target="_blank"><img class="fullWidth" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/rebrand-BB_full-logo.png" style="height: auto; display: block; border: 0; max-width: 167px; width: 100%;" width="167"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="20%">
<table border="0" cellpadding="5" cellspacing="0" class="button_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad">
<div align="center" class="alignment"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://secure.blackbull.com/" style="height:28px;width:62px;v-text-anchor:middle;" arcsize="18%" stroke="false" fillcolor="#ffffff"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#000000; font-family:sans-serif; font-size:15px"><![endif]--><a href="https://secure.blackbull.com/" style="text-decoration:none;display:inline-block;color:#000000;background-color:#ffffff;border-radius:5px;width:auto;border-top:0px solid transparent;font-weight:600;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:'Readex Pro','Arial';font-size:15px;text-align:center;mso-border-alt:none;word-break:keep-all;white-space: nowrap;" target="_blank"><span style="padding-left:10px;padding-right:10px;font-size:15px;display:inline-block;letter-spacing:normal;"><span style="word-break: break-word; line-height: 18px; white-space: nowrap">Login</span></span></a><!--[if mso]></center></v:textbox></v:roundrect><![endif]--></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-3" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="20%">
<table border="0" cellpadding="5" cellspacing="0" class="button_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad">
<div align="center" class="alignment"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://secure.blackbull.com/dashboard/wallet/add-funds?lang=en" style="height:28px;width:57px;v-text-anchor:middle;" arcsize="18%" stroke="false" fillcolor="#ffffff"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#000000; font-family:sans-serif; font-size:15px"><![endif]--><a href="https://secure.blackbull.com/dashboard/wallet/add-funds?lang=en" style="text-decoration:none;display:inline-block;color:#000000;background-color:#ffffff;border-radius:5px;width:auto;border-top:0px solid transparent;font-weight:600;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:'Readex Pro','Arial';font-size:15px;text-align:center;mso-border-alt:none;word-break:keep-all;" target="_blank"><span style="padding-left:10px;padding-right:10px;font-size:15px;display:inline-block;letter-spacing:normal;"><span style="word-break: break-word; line-height: 18px;white-space: nowrap;">Fund</span></span></a><!--[if mso]></center></v:textbox></v:roundrect><![endif]--></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Further Questions Contact Us Bar:
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-7 mobile_hide" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-size: auto;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000; background-color: #1a58d3; background-image: url(https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/question%20section%20backdrop.png); background-repeat: no-repeat; background-size: cover; border-radius: 0; width: 600px; margin: 0 auto;" width="600">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 50px; padding-left: 45px; padding-right: 20px; padding-top: 50px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="41.666666666666664%">
<table border="0" cellpadding="0" cellspacing="0" class="paragraph_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;direction:ltr;font-family:'Readex Pro','Arial';font-size:19px;font-weight:600;letter-spacing:0px;line-height:120%;text-align:left;mso-line-height-alt:22.8px;">
<p style="margin: 0;"><strong>Any questions?</strong><br>
<strong>Get in touch.</strong></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 5px; padding-top: 5px; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="58.333333333333336%">
<table border="0" cellpadding="0" cellspacing="0" class="icons_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td class="pad" style="vertical-align: middle; color: #000000; font-family: inherit; font-size: 14px; letter-spacing: 0px; padding-bottom: 35px; padding-left: 20px; padding-right: 20px; padding-top: 35px; text-align: right;">
<table align="right" cellpadding="0" cellspacing="0" class="alignment" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 15px;" class=""><a href="tel:+6495585142" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/call-us-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;" class=""><a href="https://blackbull.com/en/" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/live_chat-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;" class=""><a href="https://blackbull.com/en/" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/visit-web-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 10px;" class=""><a href="mailto:[email protected]?subject=" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/mail-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-8 desktop_hide" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden; background-size: auto;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden; color: #000; background-color: #06f; background-size: auto; border-radius: 0; width: 600px; margin: 0 auto;" width="600">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; padding-bottom: 30px; padding-left: 45px; padding-right: 20px; padding-top: 30px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="paragraph_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; mso-hide: all; max-height: 0; display: none; overflow: hidden;" width="100%">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;direction:ltr;font-family:'Readex Pro','Arial';font-size:19px;font-weight:600;letter-spacing:0px;line-height:120%;text-align:left;mso-line-height-alt:22.8px;">
<p style="margin: 0;">Any Questions?<br>
Get in touch.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-9 desktop_hide" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden; background-size: auto;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden; color: #000; background-color: #000; background-image: url(https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/blackbackground.png); background-repeat: no-repeat; background-size: cover; border-radius: 0; width: 600px; margin: 0 auto;" width="600">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; font-weight: 400; background-color: #000000; padding-bottom: 30px; padding-left: 45px; padding-right: 20px; padding-top: 30px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="icons_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden;" width="100%">
<tbody>
<tr>
<td class="pad" style="vertical-align: middle; color: #000000; font-family: inherit; font-size: 14px; font-weight: 400; padding-bottom: 35px; padding-left: 20px; padding-right: 20px; padding-top: 35px; text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="alignment" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-hide: all; max-height: 0; display: none; overflow: hidden;">
<tbody>
<tr>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 15px;" class=""><a href="+6495585142" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/call-us-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;" class=""><a href="https://blackbull.com" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/live_chat-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px;" class=""><a href="https://blackbull.com" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/visit-web-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
<td style="vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 10px;" class=""><a href="[email protected]" style="text-decoration: none;" target="_self"><img align="center" class="icon" height="32" src="https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/867844_851980/mail-32.png" style="height: auto; display: block; margin: 0 auto; border: 0;" width="32"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The Gmail apps work with a background image approach. That is, for dark mode- but that's not what you're talking about.
There is a recent issue that may be affecting some users where background images stop working. This is a bug with Gmail webmail, and they are apparently fixing it. In the meantime, using the attribute background will work, i.e.
background="https://path.to/image". See https://freshinbox.com/blog/gmail-rolling-out-changes-that-strip-background-image-css/?r=email for more details.Outlook dark mode is not working because background images are not supported via the normal method. You have to use VML. However, if you do use VML, images on Windows Mail (ever so slightly different to Outlook, but basically the same) within that section do not appear. (There are lots of answers already on how to make background images in Outlook work.) There are very complicated ways of potentially making it work for Windows Mail, but we don't bother any more so I'd have to hunt around for it. Comment if you want me to expand on that.