close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

How To Add Background Image to Email Template

Thread began 11/11/2010 7:59 am by Jason Kline | Last modified 11/18/2010 10:34 am by Jason Kline | 2885 views | 4 replies

Jason Kline

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); ?>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<?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>

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...