repeated background image, please help

hi everyone, I am coding an html email which has a small background image in a table with some text over the top. When I check the email after its sent (outlook)t I notice the background image is repeating.
How do I fix this?

http://www.twistedjunkie.eclipse.co.uk/ … nline.html

thanks


lister

fyredefyre fyredefyre, 7 years ago

This will fix your repeating issues. Add this within your table or td tag:

background="images/background.gif" style="background-repeat:no-repeat"

www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
Mathew Mathew, 7 years ago

Thanks Jordan, hope that helps you out Lister.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
lister, 6 years ago

Hi, thanks for the code, I am now doing a new email which breaks in hotmail/PC Gmail. The part that's breaking is the can at the bottom, maybe where the 4 xPint pack line height is being ignored and pushing the cell contents down. I know the text line height is an issue but I really need the text live, could someone please help?

Also I have some background images which have been added inline, I want to make sure these do not repeat, I added the code above, but now the background has disappeared .

The file started as css (with some inline) but then I use the http://premailer.dialect.ca/ to inline all the styles.

Please could someone help:

before
http://www.twistedjunkie.eclipse.co.uk/testfolder/impulse_printable_coupon_013.html

Then using the premailer script
http://www.twistedjunkie.eclipse.co.uk/testfolder/impulse_printable_coupon_013inline.html

Thanks..


rob

fyredefyre fyredefyre, 6 years ago

It's hard to say what exactly is wrong with your email without trawling through the code and testing in browsers. All I'd reccomend doing is setting a image style:

img { display: block; }

This ought to fix your issues with Gmail/Hotmail.

Background images should be considered as 'nice to have' visual cues that should be used with the assumption that they will not work in every single email browser. Browsers that won't support background images include Gmail & Hotmail.

Feel free to view the full list of cross-browser support here: http://www.campaignmonitor.com/css/

Let me know if you still need some help.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
lister, 6 years ago

Hello again,

I have a background image which has been placed in a TD, I want to make sure the background doesn't repeat
how do i include  background="images/background.gif" style="background-repeat:no-repeat" into the html below.
I have tried a few things but the page just collapses, please help..

My code looks like this:

                <tr>
          <td background="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/send-to-a-mate-buttons.gif" align="center" height="72" valign="middle" style="font-size: 12px; line-height: 17px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="600">
          <table cellspacing="0" border="0" align="center" cellpadding="0" width="100%">
  <tr>
    <td style="font-size: 12px; line-height: 17px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="85">&nbsp;</td>
    <td class="sendtomate" align="center" style="font-size: 12px; line-height: 17px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="196"><a href="http://www.addresstobeadded.com" style="font-weight: bold; font-size: 14px; color: #000;">SEND A MATE A<br />FOSTER'S VOUCHER</a></td>
    <td style="font-size: 12px; line-height: 17px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="38">&nbsp;</td>
    <td class="sendtomate" align="center" style="font-size: 12px; line-height: 17px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="178"><a href="http://www.addresstobeadded.com" style="font-weight: bold; font-size: 14px; color: #000;">SEND A MATE A STRONGBOW VOUCHER</a></td>
    <td style="font-size: 12px; line-height: 17px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;" width="103">&nbsp;</td>
  </tr>
</table>
</td>
        </tr>

Thanks


lister

fyredefyre fyredefyre, 6 years ago

Hi lister,

Your code would look something like:

<td background="http://www.twistedjunkie.eclipse.co.uk/testfolder/images/send-to-a-mate-buttons.gif" align="center" height="72" valign="middle" style="font-size: 12px; line-height: 17px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; background-repeat:no-repeat" width="600">

As you've already got styles involved you simple add the background-repeat:no-repeat to the rest of your in-line style where needed.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
jmp909, 6 years ago

you don't want to rely on styles though. not every email client supports them

make your backround image a lot larger in dimensions and have it fade to a flat colour (or whatever looks alright)... that way even if you're viewer increases their font size the graphic won't tile anyway.

fyredefyre fyredefyre, 6 years ago

You're contradicting yourself here and sending people the wrong message, when background images themselves have limited support. A background will repeat by default, so you will need CSS to enforce the non-repeating regardless.

If you feel committed to using image gradients then set these as foreground images and not as a background.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
DesignKris, 6 years ago

Gmail doesnt support background images yet.


Kris
-----
http://www.design-kris.com

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
1-888-533-8098