backgrounds.cm
Open in
urlscan Pro
103.28.41.100
Public Scan
URL:
https://backgrounds.cm/
Submission: On May 02 via api from US — Scanned from AU
Submission: On May 02 via api from US — Scanned from AU
Form analysis 0 forms found in the DOM
Text Content
Campaign Monitor
* Sign up
* Log In
BULLETPROOF BACKGROUND IMAGES
Use rock-solid background images in your HTML email with some help from
VML and CSS. Why not do the same with our bulletproof button generator?
Background Image Host your own image or use a free service like imgur (use
“Direct Link” URL). Fallback color
Shown if the background image isn’t loaded,
and behind images that have transparency. Apply background image to: Full email
body Tile the background image in the
full email window. A single table cell Tile the background image in only a
restricted part of a table based layout.
Table cell width
px
Full email width Fixed width <td>, or full width <table>. Table cell height
px
Fit to content
Fixed height, or adapt naturally to table cell content. * Treated as fixed by
some email clients, and as a minimum by others. Make sure any fixed heights and
widths are larger than the overlaid content.
CREDIT
Huge thanks to our very own email ninja, Stig for making this tool. Say thanks
@stigm
To: Your next campaign
Subject: Bulletproof background images
Add the following right after the opening <body> tag… | <div
style="background-color:#7bceeb;"> <!--[if gte mso 9]> <v:background
xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile"
src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/> </v:background>
<![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0"
border="0"> <tr> <td valign="top" align="left"
background="https://i.imgur.com/YJOX1PC.png"> …and this right before the closing
</body> tag. | </td> </tr> </table> </div>
Will it work? Field guides
WILL IT WORK?
An ever growing archive of testing and advice on what does and doesn't work in
the challenging world of HTML email design.
CSS GUIDE ›
A full and up-to-date CSS guide on what will, and what won't work in your email
designs.
GETTING STARTED WITH EMAIL MARKETING ›
We provide a complete guide on how to create successful campaigns, from
establishing goals to building your list.
WEB FONTS IN EMAILS ›
Email typography will spice up your content and make it a pleasure to read.
USING FORMS IN EMAILS ›
We explore a few things you need to know about how forms work (or don't work) in
email.
HANDY FIELD GUIDES
Whether you're just starting out with email marketing or a pro looking for a
refresher, our handy guides walk you through the entire process of developing an
effective email campaign.
RESPONSIVE EMAIL DESIGN ›
Learn how to design and code mobile-friendly email campaigns for a great
small screen experience.
CODING YOUR EMAILS ›
Produce a solid email template for your well-thought-out content using HTML
and CSS.
DESIGNING FOR THE INBOX ›
Apply the same HTML and CSS skills you already possess to a different medium
and new design context.
1. See all of our guides
Got questions about this tool?
Read our basic troubleshooting and FAQ
COMPATIBILITY
1. Android Mail
2. AOL Web
3. Apple Mail
4. Gmail
5. iPad/iPhone Mail
6. Lotus Notes 8
7. Outlook.com
8. Outlook 2000/03
9. Outlook 2007/10/13
10. Outlook XP
11. Thunderbird
12. Yahoo! Mail
GET IN TOUCH WITH US
Found a bug? Made an improvement? Or do you simply need a hand with something?
If so, get in touch with us.
BASIC TROUBLESHOOTING STEPS
1. 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.
2. 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.
3. 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 support@campaignmonitor.com
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 <v:textbox> tag.
To center the content horizontally, you can replace the <div> tag with <center>.
Right aligning the content can be done with <p align="right">, 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 <align="right">.
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 <p style="margin:0;mso-hide:all"><o:p
xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p> right before the
closing </v:textbox> 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.
Campaign Monitor
Email Marketing Features Pricing Resources Terms & Policies