While developing an HTML email that renders correctly across all platforms, I encountered an issue with Yahoo Mail. The background color and linear gradient are not displaying as expected in Yahoo Mail (tested in Chrome). Despite knowing the best practices for HTML emails, including using tables and inline styles, the format seems to be working fine here. I used Putmail to move everything inline. You can access the full HTML/CSS code through the provided link. Any insights on why Yahoo is not showing the background color or linear gradient would be greatly appreciated. Thank you! :)
<body style="background-color: #bae1eb">
<div id="image_container">
<img src="https://dl.dropbox.com/s/go1ytzr7dogudlf/cloudlogologo.png?dl=0" alt="https://dl.dropbox.com/s/go1ytzr7dogudlf/cloudlogologo.png?dl=0" id="image">
</div>
<div id="mainBody">
<div id="textBody">
<p> Dear Person, </p>
<p> Welcome to join the TUTUroomii community. Here, you can explore amazing people and housing resources in the LGBTQ+ community. We hope you will find your ideal roomie, new friends, and even more by using the APP. Have Fun!</p>
<p> Cheers, </p>
<div id="endingp">
<p id="exception"> For a better </p>
<img id="end_logo" src="https://dl.dropbox.com/s/x7yxpmzj4cpcgdt/forabetter.png?dl=0" alt="https://dl.dropbox.com/s/x7yxpmzj4cpcgdt/forabetter.png?dl=0">
</div>
</div>
<div id="social-icons-container">
<a href="https://twitter.com/TUTUroomii"><img class="social-icons" id="twitter" src="https://dl.dropbox.com/s/cpgk8dj48niiwjf/twitter.png?dl=0" alt="https://dl.dropbox.com/s/cpgk8dj48niiwjf/twitter.png?dl=0"></a>
<a href="https://www.instagram.com/tuturoomii/"><img class="social-icons" id="instagram" src="https://dl.dropbox.com/s/bp2iyt1rnn89aoc/instagram.png?dl=0" alt="https://dl.dropbox.com/s/bp2iyt1rnn89aoc/instagram.png?dl=0"></a>
<a href="https://www.facebook.com/tuturoomii/?fref=ts"><img class="social-icons" id="facebook" src="https://dl.dropbox.com/s/ps2y270i0s6csam/facebook.png?dl=0" alt="https://dl.dropbox.com/s/ps2y270i0s6csam/facebook.png?dl=0"></a>
</div>
<div id="footerText">
<p class="center">If you wish to unsubscribe,</p>
<a href="" target="_blank" style="color:#7D6796">
<p class="center">unsubscribe here </p>
</a>
</div>
</div>
<div id="footerFooter">
</div>
CSS
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 99%;
}
body {
/* For WebKit (Safari, Google Chrome etc) */
background: #bae1eb;
background-color: #bae1eb;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#bae1eb, white) center center no-repeat;
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#bae1eb, white) center center no-repeat;
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#bae1eb, white) center center no-repeat;
/* For Firefox 3.6 to 15 */
background: linear-gradient(#bae1eb, white) center center no-repeat;
/* Standard syntax */
background-repeat: no-repeat;
background-attachment: fixed;
}
h1,
h2,
h3,
p {
font-family: Tahoma, sans-serif;
margin-top: 1px;
}
h1 {
color: #898989;
font-size: 40px;
font-weight: normal;
}
p {
color: #898989;
font-size: 15px;
font-weight: normal;
margin-bottom: 1em;
}
.fullwidth {
width: 100%;
}
#image {
display: block;
width: 175px;
margin-left: auto;
margin-right: auto;
}
#image_container {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
}
#mainBody {
display: block;
border-radius: 15px;
margin-top: -30px;
margin-left: auto;
margin-right: auto;
background: white;
width: 350px;
height: auto;
}
#textBody {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 3em;
width: 80%;
}
#end_logo {
width: 10em;
vertical-align: middle;
}
#exception {
display: inline-block;
}
#social-icons-container {
margin-top: 20px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.social-icons {
width: 30px;
height: 30px;
}
#instagram {
margin-left: 20px;
margin-right: 20px;
}
#social-icons-container {
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#footerText {
width: 80%;
position: relative;
display: inline-block;
margin-right: 10%;
margin-left: 10%;
margin-top: 30px;
}
.center {
text-align: center;
}
#footerFooter {
margin-top: 25px;
height: 100px;
}