background-image support in yahoo

Hi everybody,

I'm running into a little problem.
I playing with background-image support.
As Live mail does not support it i'm doing a style to display the html email without background-images and i use the e.classname to target the mail clients with support for background-images.

but i can't manage to display a background image in yahoo unless it is specified in an inline style and not in the style tag.

is it normal?


Dave Dave, 8 years ago

That's weird zapatoche, I was under the impression that background-image was supported cia CSS in the <head> for both Yahoo! Classic and the new Yahoo! Mail. Care to post your code if you're still having problems?

dvsDave, 8 years ago

Yeah, inline styles are pretty much still required to get the most compatibility across the widest range of email clients.

Look at how the campaign monitor and mailbuild structure the css to have an identical background image declaration for both the body tag and a div tag (the div tag, you'll notice is simply a wrapper around all the content, just below the body tag and closes right before the closing body tag.

<style type="text/css" media="screen">
    body {
        margin: 0px;
        padding: 0px;
        color: #fff;
        background: #333 url("img/bgBody.gif") repeat-x 0px 150px;
    * #BodyImposter {
        color: #fff;
        background: #333 url("img/bgBody.gif") repeat-x 0px 150px;
        width: 100%;
        margin: 0px;
        padding: 0px;
        text-align: center;

<div id="BodyImposter" style="color: #fff; background: #333 url(img/bgBody.gif) repeat-x 0px 150px;">

<--- Content --->

zapatoche, 8 years ago

Well I must say that I am puzzled, I  have the feeling that I used background-images from the header of the page with success, but no certainty anymore as it doesn't want to work anymore.

This is a shortened version of my code.

this is in the style tag in the header

 .bullet  {
    list-style: none;
 .bullet li {
    background: #fff url( no-repeat 0 50%;
    padding-left: 43px;
    margin: 10px 0;

.bullet li a {
    padding: 4px 10px;
    background: #1E5460;
    color: #fff;

this is in the page

<ul class="bullet" style="margin: 1em 0 2em; padding: 0 40px;">
    <li style="background: url( no-repeat 0 50%; 
            margin-bottom: 5px; padding-left: 43px; list-style: none;"><font size="3"><a href="" style="background: #1E5460; padding: 4px 10px; color: #fff;">Lorem ipsum dolor</a></font></li>
    <li><font size="3"><a href="">Lorem ipsum dolor</a></font></li>

Well when i try this Yahoo display only the inline background-image and not the one from the head of the document.

otherwise, i have header in my page with an other background-image.
When i read the css email support chart form campaign monitor (here) it says that live mail doesn't support background images.

And the previous example doesn't work indeed. but as i was trying to sort out my problem with Yahoo i did this:

    <th align="center">
              <h1 style="background: url( repeat-x 0 100%; background-color: #E7F0D2;  text-align: right; margin: 0; padding: 0; padding-right: 20px; line-height: 36px; height: 36px" ><strong><font face="Verdana, Helvetica, Arial, sans-serif" color="#434219" size="2">Lorem ipsum dolor</font></strong>

To my surprise, this display a background-image in Windows Live.

that's where i am now.

inline... inline... inline...

but am I missing something?


dvsDave, 8 years ago

can you post the whole html page up on your site?  I'd like to see what effect you are trying to achieve.

zapatoche, 8 years ago

Hi there,

i just uploaded the file on my server … 2b_vs.html

I broke down the thing to have a different design regarding the support for css and especially background-images. But this litle thing i have with yahoo right now is annoying.


zapatoche, 8 years ago

Hello everybody

hope you are having a nice day.

I just would like to ask a simple question to check either I'm crazy or not.

Does anybody has problem with background images from the <style></style> tag in yahoo.mail.

I still can't find a solution to my problem and some of the design i made earlier need to be retouched.

So is it a YES or is it a NO for you?


Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free