Backgrounds.cmBackgrounds.cm

H1 Headings

1. Bulletproof background images

H2 Headings

1. Will it work?
2. Handy field guides
3. Basic troubleshooting steps Check that the code you're sending is exactly what was generated above. If you've made manual code changes, and things work as expected when you test the original version, something may have gone wrong while tweaking the code. See if the problem is happening in more than one email client. If it's specific to one email host, inspect the received email HTML to see if a mail server may have altered your code before it reached the email client. If you've sent the email with a different service than Campaign Monitor, try sending previews to a few different email hosts (e.g. Gmail or Yahoo! Mail) and inspect the received email HTML. If you're seeing changes to your code with every address you send to, it's likely that the service you're using to send emails is making unwanted changes to your HTML. If you're still having trouble, feel free to email [email protected] your full template/campaign files, as well as a screenshot showing the issue clearly in the relevant email client(s). Common questions and known issues Can I use bulletproof background images or buttons on top of other background images? Unfortunately, these background images and buttons can not be placed on top of other background images, because Outlook doesn't support nested VML elements. In many cases though, you may be able to code the design up successfully by changing the structure. For instance, if only part of the image needs to be behind text content, you can sometimes slice the image, use a bulletproof background image for only that part of the design, and use bulletproof buttons or inline images (held together by a table structure) for other parts. How can I make my bulletproof background image responsive? Because Outlook doesn't support @media queries, you only need to worry about the email clients that do. So only the HTML element needs to be responsive, not the VML. As a general recommendation, using mostly pixel based widths in the HTML is more reliable, and you can then override this with other pixel or percentage based widths for other viewports like with any responsive web design. To get started, give your background image table cell a class or ID that you can target. Then in any appropriate @media queries, give the table cells different dimensions, background images, etc. Can I stop background images from repeating? This technique can only add repeating background images to your emails. But depending on your design, you may be able to solve this by using a fixed pixel height, width, or both. Or in some cases, adding more space around the image file itself might help. When centering content on top of full email width background images, why does it not line up with other centered elements? Full email width backgrounds in Outlook are based on the mso-width-percent property, since percentage based values don't work with the regular width property. Unfortunately there are a few Outlook 2007/2010/2013 bugs that affect this technique. Outlook forces a minimum body margin on all HTML emails. And if you set a VML element to "mso-width-percent: 1000" (100% width), it bases the rendered width on the full email/viewport width, while still adding 10px margins on each side. So if you center content inside full width background image tables, it can offset that content 10px to the right, and also cause horizontal scrolling. You can experiment with reducing the mso-width-percent to somewhere around 960-980 to avoid scrolling, but alignment will still depend on the width of the viewport. Why is my background image scaled up or down in Outlook? Unlike most other email clients and browsers, Outlook 2007/2010/2013 uses the DPI of your background image to determine the scale. So to make sure it renders at the right size, set the image's resolution to 96 DPI. How can I add padding or change the content alignment in bulletproof background image cells? You can place a table inside the background image cell, around your content, and add table rows and columns with height and width equal to the spacing you'd like to add. In some cases, a better option can be to slice the image, and only use a background image for the table cell that will have the content. The surrounding cells can have the rest of the design as inline image tags, text or plain background colors, depending on the design. To set the vertical alignment of your content, you can change the table cell's valign attribute to middle or bottom, and add style="v-text-anchor:middle" or style="v-text-anchor:bottom" to the tag. To center the content horizontally, you can replace the tag with . Right aligning the content can be done with , but this can result in some unwanted spacing. Another option is to place a one-cell table inside the background image cell, give this cell the same width as the background image, and add . When nesting a table inside a bulletproof background image cell, and fitting the height to the content, how do I get rid of the gap in Outlook at the bottom of the cell? This has to do with Outlook always expecting a paragraph inside VML elements (and inserting them if there isn't one). But to work around the issue, you can add the line   right before the closing tag, and the gap should be no more. Can I make background images editable with Campaign Monitor template tags? Unfortunately, background images have to be hard coded into your template or campaign for now. You can however use a tag with multiple s to make different pre-defined background images available in the editor. If you’d like to see this feature added to the editor, make your voice heard in our forums or by email.
4. Common questions and known issues Can I use bulletproof background images or buttons on top of other background images? Unfortunately, these background images and buttons can not be placed on top of other background images, because Outlook doesn't support nested VML elements. In many cases though, you may be able to code the design up successfully by changing the structure. For instance, if only part of the image needs to be behind text content, you can sometimes slice the image, use a bulletproof background image for only that part of the design, and use bulletproof buttons or inline images (held together by a table structure) for other parts. How can I make my bulletproof background image responsive? Because Outlook doesn't support @media queries, you only need to worry about the email clients that do. So only the HTML element needs to be responsive, not the VML. As a general recommendation, using mostly pixel based widths in the HTML is more reliable, and you can then override this with other pixel or percentage based widths for other viewports like with any responsive web design. To get started, give your background image table cell a class or ID that you can target. Then in any appropriate @media queries, give the table cells different dimensions, background images, etc. Can I stop background images from repeating? This technique can only add repeating background images to your emails. But depending on your design, you may be able to solve this by using a fixed pixel height, width, or both. Or in some cases, adding more space around the image file itself might help. When centering content on top of full email width background images, why does it not line up with other centered elements? Full email width backgrounds in Outlook are based on the mso-width-percent property, since percentage based values don't work with the regular width property. Unfortunately there are a few Outlook 2007/2010/2013 bugs that affect this technique. Outlook forces a minimum body margin on all HTML emails. And if you set a VML element to "mso-width-percent: 1000" (100% width), it bases the rendered width on the full email/viewport width, while still adding 10px margins on each side. So if you center content inside full width background image tables, it can offset that content 10px to the right, and also cause horizontal scrolling. You can experiment with reducing the mso-width-percent to somewhere around 960-980 to avoid scrolling, but alignment will still depend on the width of the viewport. Why is my background image scaled up or down in Outlook? Unlike most other email clients and browsers, Outlook 2007/2010/2013 uses the DPI of your background image to determine the scale. So to make sure it renders at the right size, set the image's resolution to 96 DPI. How can I add padding or change the content alignment in bulletproof background image cells? You can place a table inside the background image cell, around your content, and add table rows and columns with height and width equal to the spacing you'd like to add. In some cases, a better option can be to slice the image, and only use a background image for the table cell that will have the content. The surrounding cells can have the rest of the design as inline image tags, text or plain background colors, depending on the design. To set the vertical alignment of your content, you can change the table cell's valign attribute to middle or bottom, and add style="v-text-anchor:middle" or style="v-text-anchor:bottom" to the tag. To center the content horizontally, you can replace the tag with . Right aligning the content can be done with , but this can result in some unwanted spacing. Another option is to place a one-cell table inside the background image cell, give this cell the same width as the background image, and add . When nesting a table inside a bulletproof background image cell, and fitting the height to the content, how do I get rid of the gap in Outlook at the bottom of the cell? This has to do with Outlook always expecting a paragraph inside VML elements (and inserting them if there isn't one). But to work around the issue, you can add the line   right before the closing tag, and the gap should be no more. Can I make background images editable with Campaign Monitor template tags? Unfortunately, background images have to be hard coded into your template or campaign for now. You can however use a tag with multiple s to make different pre-defined background images available in the editor. If you’d like to see this feature added to the editor, make your voice heard in our forums or by email.

H3 Headings

H4 Headings

1. Can I use bulletproof background images or buttons on top of other background images?
2. How can I make my bulletproof background image responsive?
3. Can I stop background images from repeating?
4. When centering content on top of full email width background images, why does it not line up with other centered elements?
5. Why is my background image scaled up or down in Outlook?
6. How can I add padding or change the content alignment in bulletproof background image cells?
7. When nesting a table inside a bulletproof background image cell, and fitting the height to the content, how do I get rid of the gap in Outlook at the bottom of the cell?
8. Can I make background images editable with Campaign Monitor template tags?

H5 Headings

H6 Headings

1. Credit
2. CSS guide ›
3. Getting started with email marketing ›
4. Web fonts in emails ›
5. Using forms in emails ›
6. Responsive Email Design ›
7. Coding your Emails ›
8. Designing for the Inbox ›
9. Compatibility
10. Get in touch with us

Total IFRAMEs

Total Images

Google Adsense

Google Analytics

Links - Internal

1. Backgrounds Got questions about this tool?Read our basic troubleshooting and FAQ
   http://backgrounds.cm/javascript://

Links - Internal (nofollow)

Links - Outbound

1. Backgrounds Campaign Monitor
   https://www.campaignmonitor.com
2. Backgrounds Sign up
   https://www.campaignmonitor.com/signup/?sv=backgrounds
3. Backgrounds Log In
   https://login.createsend.com/l
4. Backgrounds button generator
   http://buttons.cm/
5. Backgrounds imgur
   //imgur.com/
6. Backgrounds isn’t loaded
   //www.campaignmonitor.com/resources/will-it-work/image-blocking/
7. Backgrounds Stig
   http://www.campaignmonitor.com/our-story/meet-the-team/#stigm
8. Backgrounds Say thanks @stigm
   //twitter.com/stigm/
9. Backgrounds Tweet
   //twitter.com/share
10. Backgrounds archive
    http://www.campaignmonitor.com/resources/guides/
11. Backgrounds CSS guide › A full and up-to-date CSS guide on what will, and what won't work in your email designs.
    http://www.campaignmonitor.com/css/
12. Backgrounds Getting started with email marketing › We provide a complete guide on how to create successful campaigns, from establishing goals to building your list.
    http://www.campaignmonitor.com/resources/guides/getting-started-with-email-marketing/
13. Backgrounds Web fonts in emails › Email typography will spice up your content and make it a pleasure to read.
    http://www.campaignmonitor.com/resources/guides/web-fonts-in-email/
14. Backgrounds Using forms in emails › We explore a few things you need to know about how forms work (or don't work) in email.
    http://www.campaignmonitor.com/resources/guides/email-forms/
15. Backgrounds Responsive Email Design › Learn how to design and code mobile-friendly email campaigns for a great small screen experience.
    http://www.campaignmonitor.com/dev-resources/guides/mobile/
16. Backgrounds Coding your Emails › Produce a solid email template for your well-thought-out content using HTML and CSS.
    http://www.campaignmonitor.com/dev-resources/guides/coding-html-emails/
17. Backgrounds Designing for the Inbox › Apply the same HTML and CSS skills you already possess to a different medium and new design context.
    http://www.campaignmonitor.com/dev-resources/guides/design/
18. Backgrounds See all of our guides
    http://www.campaignmonitor.com/resources/guides/
19. http://www.campaignmonitor.com/dev-resources/guides/design/
    http://www.campaignmonitor.com/dev-resources/guides/design/
20. http://www.campaignmonitor.com/dev-resources/guides/mobile/
    http://www.campaignmonitor.com/dev-resources/guides/mobile/
21. http://www.campaignmonitor.com/dev-resources/guides/coding-html-emails/
    http://www.campaignmonitor.com/dev-resources/guides/coding-html-emails/
22. Backgrounds get in touch with us
    //help.campaignmonitor.com/contact
23. Backgrounds inspect the received email HTML
    //quickguid.es/messagesource/
24. Backgrounds Gmail
    //gmail.com/
25. Backgrounds Yahoo! Mail
    //mail.yahoo.com/
26. Backgrounds [email protected]
    //help.campaignmonitor.com/contact
27. Backgrounds a screenshot
    //quickguid.es/screenshot/
28. Backgrounds held together by a table structure
    //www.campaignmonitor.com/guides/coding/guidelines/
29. Backgrounds Outlook doesn't support @media queries
    //www.campaignmonitor.com/css/
30. Backgrounds the email clients that do
    //www.campaignmonitor.com/guides/mobile/
31. Backgrounds in any appropriate @media queries
    //www.campaignmonitor.com/guides/mobile/coding/
32. Backgrounds Outlook forces a minimum body margin
    //social.msdn.microsoft.com/Forums/en-US/outlookdev/thread/e83772b8-c78b-492c-8bab-01dfbeaba77f/
33. Backgrounds set the image's resolution
    //www.rideau-info.com/photos/changedpi.html
34. Backgrounds add style="v-text-anchor:middle" or style="v-text-anchor:bottom"
    //msdn.microsoft.com/en-us/library/bb264071(v=vs.85).aspx
35. Backgrounds Outlook always expecting a paragraph inside VML elements
    //social.technet.microsoft.com/Forums/en-US/outlook/thread/515cacfc-1c7f-41d8-b99d-529e07131e1c/#70886001-b028-45d0-8982-8fe4683ada1d
36. Backgrounds a tag
    //www.campaignmonitor.com/create/editable-content/#repeater
37. Backgrounds multiple s
    //www.campaignmonitor.com/create/editable-content/#layout
38. Backgrounds in our forums
    //www.campaignmonitor.com/forums/
39. Backgrounds by email
    //help.campaignmonitor.com/contact
40. Backgrounds Email Marketing
    https://www.campaignmonitor.com/email-marketing/
41. Backgrounds Features
    https://www.campaignmonitor.com/features/
42. Backgrounds Pricing
    https://www.campaignmonitor.com/pricing/
43. Backgrounds Resources
    https://www.campaignmonitor.com/resources/
44. Backgrounds Terms & Policies
    https://www.campaignmonitor.com/policies/

Links - Outbound (nofollow)