How To Add Background Image to Email Template
I am trying to add a background image to one of the email templates. I modified this line in the email template file but the background image still does not show up when the email is received.
<div id="background" style="padding: 20px; text-align: center; font-size: 12px; width:97%; background-image:url(image.jpg); background-repeat:no-repeat; background-position: top; height: 1300px;">
I am trying to use the help documentation. (Choosing your email body) The first image seems to be an old image from FB 1.0. Can there be some more details or illustrations on the relative locations and editable region called "emailhead"? See below:
Editing in Dreamweaver
The page opened to edit your content is a temporary page, and saving it will return the updated content to the Universal Email dialog. It should be noted:
>Relative locations for links and images need to be updated to contain the full path. Once an email has been sent by your application, it will need a full path to a location, as it will be outside of your staged environment and in somebody's mailbox.
>CSS will work if specified in-line, but any style declarations that are normally placed in the head will need to be specified in the editable region called "emailhead" when created in this document window. This editable region is only visible in code view in DW.
>Any server-side code that you wish to be run on the page that would be normally be placed above the head tag needs to be specified on the page you are applying the Universal Email server behavior to.
Here is the code for the email template I am using.
<?php
$remove = array();
$remove[] = "";
$remove[] = "x";
$remove[] = "y";
$removeBegins = array();
$removeBegins[] = "Security";
$removeEnds = array();
$removeEnds[] = "_x";
$removeEnds[] = "_y";
$removeIncludes = array();
$removeIncludes[] = "Security";
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blank Template</title>
</head>
<body style="padding: 20px; text-align: center;">
<div id="background" style="padding: 20px; text-align: center; font-size: 12px; width:97%; background-image:url(image.jpg); background-repeat:no-repeat; background-position: top; height: 1300px;">
<div id="page" style="padding: 5px; margin: 0 auto; width: 660px; text-align: left; padding-top:300px;">
<div id="header" style="padding: 10px;">
<h1 style="padding: 0px; margin: 0px 0px 2px 0px; font-size: 18px; text-decoration: none; font-weight: bold;">Your Email Title Goes Here</h1>
<p style="padding: 0px; margin: 0px 0px 2px 0px;">email subtitle area or directions can go here, below the title</p>
</div>
<div id="contentWrapper" style="padding: 0px 0px 40px 0px;">
<div id="contentHeader">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<th style="font-size: 12px; width: 134px; text-align: right; padding: 3px 10px 3px 3px; font-weight: bold;">Form Submitted:</th>
<td style="font-size: 12px; padding: 3px;"><?php $now = time(); ?><?php echo date("n-j-Y", $now); ?> | <?php echo date("g:i A T", $now); ?></td>
</tr>
</table>
</div>
<div id="content" style="padding: 10px 10px 10px 0px;">
<table cellpadding="0" cellspacing="0" border="0">
<?php
foreach( $_POST as $pkey => $pval ){
if (!RemoveValue($pkey,$remove,$removeBegins,$removeEnds,$removeIncludes)) {
?>
<tr valign="top">
<th style="font-size: 12px; width: 134px; text-align: right; padding: 3px 10px 3px 3px; font-weight: bold;"><?php echo(str_replace("_"," ",$pkey)); ?>:</th>
<td style="font-size: 12px; padding: 3px;"><?php echo(str_replace("\n","<BR />",(is_array($pval)?implode(", ",$pval):$pval))); ?></td>
</tr>
<?php
}
}
?>
<tr valign="top">
<th style="font-size: 12px; width: 134px; text-align: right; padding: 3px 10px 3px 3px; font-weight: bold;">Additional Notes:</th>
<td style="font-size: 12px; padding: 3px;"><p style="margin: 0px; padding: 0px 0px 3px 0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget tellus sed justo rhoncus posuere id sit amet arcu. Morbi pretium, enim faucibus facilisis hendrerit, elit. Morbi quis sodales ligula. Pellentesque elementum faucibus elementum. Sed rutrum dui in nisi dapibus molestie. Sed dictum ultricies viverra.</p>
<p style="margin: 0px; padding: 0px 0px 3px 0px;">In non urna vel nisi dictum tincidunt facilisis nec enim. In vitae lectus mauris. Mauris id sem non risus aliquam pretium at ac ipsum. Cras ac ultrices nisi. Cras ultricies ultricies bibendum. Duis vitae aliquam erat. Nullam justo augue, mattis quis ultricies in, posuere sed tortor. Aenean ornare orci nec felis semper vitae interdum velit ultrices. Ut auctor congue tellus in hendrerit. Aliquam et massa hendrerit leo sodales dapibus non ultricies mi. Morbi non tellus bibendum quam elementum bibendum sit amet vel metus.</p></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
