Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Emily Plummer
Emily Plummer
2,712 Points

My background image isn't showing up. Can someone help?

My email is code for the hero is below.

     <!-- START HERO -->
      <table style="background-image: url(http://go.hdsmith.com/epchange);" class="wrapper" height="442" align="center" background="http://go.hdsmith.com/epchange" bgcolor="#00703c" border="0" cellpadding="0" cellspacing="0" width="640">
        <tbody><tr>
          <td align="center" valign="top">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px">
              <v:fill type="frame" src="http://go.hdsmith.com/epchange" color="#ffffff" ></v:fill>
              <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                <div style="font-size:1px;line-height:1px">
                  <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" class="wrapper">
                    <tbody>
                      <tr>
                        <td height="10" style="font-size:10px; line-height:10px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td height="442" align="center" valign="top">
                          <![endif]-->
                          <table class="wrapper" align="center" border="0" cellpadding="0" cellspacing="0" width="640">
                            <tbody><tr>
                              <td style="font-size:30px; line-height:30px;" height="30">&nbsp;</td>
                            </tr>
                            <tr>
                              <td style="padding:0" align="center">
                                <table class="container" align="center" border="0" cellpadding="0" cellspacing="0" width="580">
                                  <tbody><tr>
                                    <td class="mobile" width="580">
                                      <table class="container" border="0" cellpadding="0" cellspacing="0" width="580">
                                        <tbody><tr>
                                          <td class="" pardot-region="preheader_content01" align="right"><div><span style="font-size:12px;"><span style="font-family: arial,helvetica,sans-serif;"><a href="%%view_online%%" style="text-decoration:none;"><span style="color:#808080;">View online</span></a></span></span></div>

</td> </tr> </tbody></table>

4 Answers

Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Did a quick search for you since you said the problem was mainly with Outlook. Not sure if this is still the case but sounds like background images are not supported in Outlook. Check out the following Stack Overflow posts. They go into a lot more detail about it. Hopefully they help!

http://stackoverflow.com/questions/16441034/background-images-not-working-in-outlook-2007-and-later

http://stackoverflow.com/questions/4689862/html-email-with-background-image-style-not-shown

Emily Plummer
Emily Plummer
2,712 Points

Great, thank you very much for the information!

Mark Truitt
Mark Truitt
17,230 Points
Mark Truitt
Mark Truitt
17,230 Points

Hi Emily,

I assume you are referring to background-image: url(http://go.hdsmith.com/epchange?

If so the reason is that is not a image itself. When visiting that link it takes me to http://storage.pardot.com/77762/61352/HDS_ePhero.png which is where you could need to put the bg image too.

Emily Plummer
Emily Plummer
2,712 Points

That should be the link where the background image is stored. Do I not need the link?

Mark Truitt
Mark Truitt
17,230 Points

Generally, when using email clients you want an Absolute Path to the file. We tend to run into this problem a bit with our email system from time to time.

Outlook is looking to a path that then gets redirected. While Codepen allows it to work most email clients will not. Web based will be a different story and each one will be different.

Emily Plummer
Emily Plummer
2,712 Points

I replaced the path and it is still not working. Unfortunately, Outlook is the main email client around here as well as for our customers. I tested it in Litmus and everything on there appears perfect. I think it's the actual act of sending it (to your point) that is causing the images path to redirect incorrectly. I appreciate your help!

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Putting the code into a codepen the background image seems to show up. What seems to be missing for you? What environment are you saving the code in. A Workspace or text editor? Thanks :)

http://codepen.io/anon/pen/NNLMWP

Emily Plummer
Emily Plummer
2,712 Points

I've sent a test to myself in Outlook (the newest edition), but it doesn't show up in there. It also didn't show up when I clicked the view in browser button. However, I pasted the code in Litmus and it shows up for all email clients including outlook when testing.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Try Mark's suggestion of putting the background image on a server online. My assumption is because you're linking to a hard drive which is local and the email client doesn't allow it. :-)

Good luck!

Emily Plummer
Emily Plummer
2,712 Points
Emily Plummer
Emily Plummer
2,712 Points

It is on an online server.