Coding help html for background image - Geeks to Go Forums

Jump to content

Log in Register Register Malware removal guide How it works

Coding help html for background image

#1 jon3187

  • Group: Member
  • Posts: 4
  • Joined: 18-August 12

Posted 18 August 2012 - 04:10 AM

Hi All.

Im currently working on a newsletter template from mailchimp in dreamweaver,basically editing an existing template and most of it is complete but im having a problem with my background image where it shows fine in dreamweaver.Mailchmp editor and Chrome and IE but in hotmail the bg is replaced by white.please help me fix this as I am on a deadline and need to send it out asap.If possible can I send the code so that You may be able to tell me whats wrong with it?.any help would be appreciated.

Thanks,

Jon

#2 spike_hacker_inc

  • Group: Member
  • Posts: 1,328
  • Joined: 27-April 05

Posted 18 August 2012 - 04:24 AM

Hey there Jon,

Welcome to GeeksToGo Posted Image Maybe you could post through the code you are having problems with in your next reply and then anyone that has experience with the issue can help out.... When you have posted through your code I will try an assist you where I can Posted Image

Peace Out Posted Image

#3 jon3187

  • Group: Member
  • Posts: 4
  • Joined: 18-August 12

Posted 18 August 2012 - 04:39 AM

Hey there spike_hacker_inc

Thank You for the quick reply,please let me know if You can help me in any way possible,Im totally new to web,Im basically a graphic designer and do stuff like posters,flyers etc.so this is completely new to me.thanks and here is the code below-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Facebook sharing information tags -->


<title>*|MC:SUBJECT|*</title>

<style type="text/css">
#outlook a{
padding:0;
}
body{
width:100% !important;
}
body{
margin:0;
padding:0;
}
img{
border:none;
outline:none;
text-decoration:none;
}
body
{


}
#container{

<td width="600" valign="top" background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/BackgroundIslamic.jpg"></td>


background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/BackgroundIslamic.jpg";
background-position: left top;
background-repeat: repeat;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
background-image: url(http://i1101.photobu...oundIslamic.jpg);
}
#emailBody{
-moz-box-shadow:0 0 5px #AAAAAA;
-webkit-box-shadow:0 0 5px #AAAAAA;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
box-shadow:0 0 5px #AAAAAA;
}
#headerImage img{
display:inline;
height:auto;
max-width:600px;
}
/*
@tab Page
@section primary heading style
@tip Primary headings in your message body. Make them big and easy to read.
@theme title
*/
.title{
/*@editable*/color:#FFFFFF;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:26px;
/*@editable*/font-weight:bold;
text-shadow:1px 1px 1px #11335C;
}
/*
@tab Page
@section secondary heading style
@tip Secondary headings in your message body. Make these smaller than your primary titles, but bigger than your content text.
@theme subtitle
*/
.subTitle{
/*@editable*/color:#FFFFFF;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:20px;
/*@editable*/font-weight:bold;
text-shadow:1px 1px 1px #11335C;
}
.upperProductImage{
height:auto;
max-width:600px;
}
/*
@tab Upper Product Section
@section upper product heading style
@tip The styling for your email's lower product heading. Make it a color and size that is easy to read.
*/
.upperProductHeading{
/*@editable*/color:#FFFFFF;
/*@editable*/font-family:Arial;
/*@editable*/font-size:26px;
/*@editable*/font-weight:bold;
text-shadow:1px 1px 1px #11335C;
}
.upperProductButton{
-moz-border-radius: 20px;
-moz-box-shadow: 0 10px 15px #FFFFFF inset;
-webkit-border-radius: 20px;
-webkit-box-shadow: 0 10px 15px #FFFFFF inset;
background-color: #CCCCCC;
border: 4px solid #666666;
border-radius: 20px;
box-shadow: 0 10px 15px #FFFFFF inset;
padding: 6px 0;
}
.yellow {
color: #FFF;
}
/*
@tab Upper Product Section
@section upper product button style
@tip The styling for your email's upper product buttons.
*/
.upperProductButton a:link,.upperProductButton a:visited{
/*@editable*/color: #1777FA;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 16px;
/*@editable*/font-weight: bold;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
}
/*
@tab Upper Product Section
@section upper product price style
@tip The styling for your email's lower product price text. Make it a color and size that is easy to read.
*/
.upperProductPrice{
/*@editable*/color: #000000;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 12px;
/*@editable*/line-height: 150%;
padding-top: 1px;
padding-bottom: 2px;
padding-left: 7px;
border-top-width: 0px;
border-top-style: none;
}
/*
@tab Upper Product Section
@section upper product text style
@tip The styling for your email's upper product text. Make it a color and size that is easy to read.
*/
.upperProductCopy{
/*@editable*/color: #000000;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 12px;
/*@editable*/line-height: normal;
}
/*
@tab Upper Product Section
@section upper product link style
@tip The styling for your email's upper product cell hyperlinks. Make it a color that stands out from the rest of your text.
*/
.upperProductCopy a:link,.upperProductCopy a:visited{
/*@editable*/color:#FFFFFF;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.lowerProductCell{
width:170px;
}
.lowerProductImage{
-moz-box-shadow:0 1px 0 #DEDEDE;
-webkit-box-shadow:0 1px 0 #DEDEDE;
border-right:1px solid #DEDEDE;
border-bottom:1px solid #9B9B9B;
border-left:1px solid #DEDEDE;
box-shadow:0 1px 0 #DEDEDE;
height:auto;
max-width:160px;
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
}
/*
@tab Lower Product Section
@section lower product heading style
@tip The styling for your email's lower product heading. Make it a color and size that is easy to read.
*/
.lowerProductHeading{
/*@editable*/color: #000000;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 14px;
/*@editable*/font-weight: bold;
/*@editable*/line-height: 100%;
padding-bottom: 5px;
}
.lowerProductButton{
text-align: center;
width: 60%;
padding: 5px;
}
.Lowerproductbuttonoriginal{
-moz-border-radius: 10px;
-moz-box-shadow: 0 5px 15px #FFFFFF inset;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 10px 15px #FFFFFF inset;
background-color: #FEBA13;
/* [disabled]border: 1px solid #BBC5CE; */
/* [disabled]border-radius: 10px; */
/* [disabled]box-shadow: 0 10px 15px #FFFFFF inset; */
/* [disabled]padding: 4px 0; */
text-align: center;
width: 70%;
}
.Boxforvideo {
height: 0px;
width: 0px;
background-color: #DE8811;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.lowerProductButtonbottom {
text-align: center;
width: 60%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
.LowerButtonforpricetag {
text-align: center;
width: 60%;
/* [disabled]padding-top: 10px; */
/* [disabled]padding-right: 10px; */
/* [disabled]padding-bottom: 10px; */
/* [disabled]padding-left: 20px; */
}
/*
@tab Lower Product Section
@section lower product button style
@tip The styling for your email's lower product buttons.
*/
.lowerProductButton,.lowerProductButton a:link,.lowerProductButton a:visited{
/*@editable*/color: #2C6EBD;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 11px;
/*@editable*/font-weight: bold;
text-decoration: none;
}
/*
@tab Lower Product Section
@section lower product price style
@tip The styling for your email's lower product price text. Make it a color and size that is easy to read.
*/
.lowerProductPrice{
/*@editable*/color:#45741B;
/*@editable*/font-family:Arial;
/*@editable*/font-size:12px;
/*@editable*/font-weight:normal;
/*@editable*/line-height:125%;
padding-bottom:10px;
}
/*
@tab Lower Product Section
@section lower product text style
@tip The styling for your email's lower product text. Make it a color and size that is easy to read.
*/
.lowerProductCopy{
/*@editable*/color: #FFFFFF;
/*@editable*/font-family: arial;
/*@editable*/font-size: 12px;
/*@editable*/line-height: 125%;
background-color: #474747;
padding: 5px;
}
/*
@tab Lower Product Section
@section lower product link style
@tip The styling for your email's lower product cell hyperlinks. Make it a color that stands out from the rest of your text.
*/
.lowerProductCell a:link,.lowerProductCell a:visited{
/*@editable*/color:#2B2B2B;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Footer
@section social bar text style
@tip The styling for your email's social bar text. Make it a color and size that is easy to read.
*/
#social{
/*@editable*/color:#556473;
/*@editable*/font-family:Arial;
/*@editable*/font-size:12px;
/*@editable*/line-height:100%;
}
#social img{
display:inline;
vertical-align:middle;
}
/*
@tab Footer
@section social bar link style
@tip The styling for your email's social bar hyperlinks. Make it a color that stands out from the rest of your text.
*/
#social a:link,#social a:visited{
/*@editable*/color:#153F74;
/*@editable*/font-weight:bold;
/*@editable*/text-decoration:none;
}
/*
@tab Footer
@section footer text style
@tip The styling for your email's footer text. Make it a color and size that is easy to read.
*/
#footer{
/*@tab Footer
@section footer text style
@tip The styling for your email's footer text. Make it a color and size that is easy to read.*/border-top:1px solid #E3E8ED;
/*@editable*/color:#2B2B2B;
/*@editable*/font-family:Arial;
/*@editable*/font-size:11px;
/*@editable*/line-height:150%;
}
/*
@tab Footer
@section footer link style
@tip The styling for your email's footer hyperlinks. Make it a color that stands out from the rest of your text.
*/
#footer a:link,#footer a:visited{
/*@editable*/color:#2B2B2B;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
</style></head>
<body>
<center>

<td width="100%" align="center" valign="top"http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/BackgroundIslamic.jpg ">

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="101%" id="container">
<tr>
<td align="center" valign="top">
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="621">
<img src="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/Yellowpointheader-1.jpg" width="607" id="campaign-icon" mc:edit="header_image" mc:allowdesigner mc:allowtext></table>
<table bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="0" id="emailBody">
<tr>
<td width="623">

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="bottom">
<img src="http://gallery.mailchimp.com/0d61bb2ec9002f0e9872b8c36/images/img_mainproduct.jpg" width="634" class="upperProductImage" style="max-width:600px;" mc:edit="repeatable_upper_product_image">
<br>
</td>
</tr>
<tr>
<td align="center" valign="middle" style="background-color:#1A5090; border-top:1px solid #163B68; border-bottom:1px solid #061424;">
<table width="634" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#797572" style="background-color:#474747; border-top:1px solid #FEBA13; border-bottom:1px solid #FEBA13;">
<tr>
<td width="634" align="center" valign="middle" style="padding-top:4px; padding-right:4px; padding-bottom:4px; padding-left:4px;">
<table bgcolor="#FEBA13" border="0" cellpadding="0" cellspacing="0" width="621" style="-moz-box-shadow:0 3px 3px #D39501 inset; -webkit-box-shadow:0 3px 3px #D39501 inset; background-color:#474747; border:1px solid #D39501; box-shadow:0 3px 3px #D39501 inset;">
<tr>
<td width="19">
<br>
</td>
<td align="left" valign="middle" width="254">
<br>
<table border="0" cellpadding="0" cellspacing="0" width="254" style="line-height:100%;">
<tr>
<td align="center" colspan="3" style="background-color:#474747;" class="upperProductHeading">
<div mc:edit="upper_product_heading">
Plushies are here!
</div>
<br>
</td>
</tr>
<tr align="left">
<td width="0" height="91" background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/slice-left_02.jpg"><div class="lowerProductButton" mc:edit="leftproductbuttonleft">LEARN MORE</a></div>
&nbsp;</td>
<td width="0" height="91" background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/slice-center_03.jpg"> <div class="lowerProductButton" mc:edit="lowerproductbuttonleft"><a href="" target="_blank">LEARN MORE</a></div></td>
<td width="65"><img src="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/slice-right_03.jpg" width="52" height="91" /></td>
</tr></table>

</td>
<td width="14">
<br>
</td>
<td align="center" valign="middle" width="10"><img src="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/contentsplitter-1.jpg" width="10" height="100" /></td>
<td width="14">
<br>
</td>
<td align="left" valign="middle" width="252" class="upperProductCopy">
<br>
<div class="upperProductCopy" style="background-color:#474747;" mc:edit="upper_product_copy">
We teamed up with Shawnimals to make 100 of these cool little plushies. They're laser cut by robots and hand-sewn by humans. Small enough for your desk, but big enough to hug real tight.
</div>
<br>
</td>
<td width="56">
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<br>


<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10">
<br>
</td>
<td align="left" valign="top" width="192" class="lowerProductCell">
<p><img src="http://gallery.mailchimp.com/0d61bb2ec9002f0e9872b8c36/images/img_guidecover.png" style="max-width:160px !important;" class="lowerProductImage" mc:edit="lower_product_image_left"></p>
<table width="96%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="27%" height="89" background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/back-1.jpg"><div class="lowerProductButton" mc:edit="leftlowerproductbuttonleft">AED</a></div></td>
<td width="41%" background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/Mid_03-1.jpg"><div class="lowerProductButton" mc:edit="Bottomcenterproductbuttonleft"><a href="" target="_blank">LEARN MORE</a></div></td>
<td width="26%" background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/arrow-1.jpg">&nbsp;</td>
</tr>
</table>
<p>
</p>
<div></div>
<div class="lowerProductHeading" mc:edit="lower_product_heading_left">Guides for Everything
</div>

<div class="lowerProductCopy" mc:edit="lower_product_copy_left">
We're hard at work stuffing all our wisdom about email into downloadable guides.
hihihihikhh<br>
</div>
</td>
<td width="10">
<br>
</td>
<td align="left" valign="top" width="181" class="lowerProductCell">
<p><img src="http://gallery.mailchimp.com/0d61bb2ec9002f0e9872b8c36/images/img_paperfreddies.png" style="max-width:160px !important;" class="lowerProductImage" mc:edit="lower_product_image_center"></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="27%" height="89" background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/back-1.jpg"><div class="lowerProductButton" mc:edit="leftlowerproductbuttonright">AED</a></div></td>
<td width="41%" background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/Mid_03-1.jpg"><div class="lowerProductButton" mc:edit="Bottomcenterproductbuttonright"><a href="" target="_blank">LEARN MORE</a></div></td>
<td width="27%" background="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/arrow-1.jpg">&nbsp;</td>
</tr>
</table>
<p>
</p>
<div class="lowerProductHeading" mc:edit="lower_product_heading_center">Cardstock Freddies
</div>

<div class="lowerProductCopy" mc:edit="lower_product_copy_center">
All you need is quality paper, a razor blade and some tape to assemble an army of monkeys.
<br>
</div>
</td>
<td width="11"><br>
</td>
</tr>
<tr>
<td width="10" height="74">
<br>
</td>
<td align="center" valign="top" width="192"><p><a href="" target="_blank"><a href="http://www.youtube.com/watch?v=nIutuA3daeU&amp;feature=related"><img src="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/play_button.png" alt="firstvid" width="67" height="65" /></a></p>


</td>
<td width="10">

</td>
<td align="center" valign="top" width="181">



<p><a href="" target="_blank"><a href="http://www.youtube.com/watch?v=_jLoV4zzCT4"><img src="http://i1101.photobucket.com/albums/g433/jonathan_shane_nunes/play_button.png" alt="secondvid" width="67" height="65" /></a>
</div>
</p>
</p></td>
<td width="11">
<br>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="center" valign="top"><strong>Click to play video</strong></td>
<td>&nbsp;</td>
<td align="center" valign="top"><strong>Click to play video</strong></td>
<td>&nbsp;</td>
</tr>
</table>
<br>
</div>
<br>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="637" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#feba13">

</td>
<td align="center" bgcolor="#FEBA13" valign="middle" id="social">
<br>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle">
<div mc:edit="social">
<span style="font-size:14px;">Want to stay in the loop?</span>
</div>
</td>
<td width="10">
<br>
</td>
<td align="center" valign="middle" width="30">
<img src="http://gallery.mailchimp.com/0d61bb2ec9002f0e9872b8c36/images/icon_facebook.5.png">
</td>
<td width="5">
<br>
</td>
<td align="left" valign="middle">
<div mc:edit="social_link_one">
<a href="*|FACEBOOK:PROFILEURL|*" target="_blank"> Friend us on Facebook</a>
</div>
</td>
<td width="15">
<br>
</td>
<td align="center" valign="middle" width="30">&nbsp;</td>
<td width="5">
<br>
</td>
<td>&nbsp;</td>
</tr>
</table>
<br>
</td>
<td bgcolor="#feba13">

</td>
</tr>
<tr>
<td>
<br>
</td>
<td align="left" valign="top" width="567">
<br>
<br>
<div mc:edit="footer" id="footer">
<br>
You can update your subscription preferences <a href="*|UPDATE_PROFILE|*">here</a>, or unsubscribe from this mailing <a href="*|UNSUB|*">here</a>.
<br>
*|IFNOT:ARCHIVE_PAGE|* <strong>*|LIST:DESCRIPTION|*</strong> *|END:IF|* Like this email? <a href="*|FORWARD|*">Forward it to a friend</a>!
<br>
Copyright &copy; *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.
*|IFNOT:ARCHIVE_PAGE|*
<br>
*|HTML:LIST_ADDRESS_HTML|*
*|END:IF|*
</div>
</td>
<td width="50">
<br>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="left" valign="top">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<br>
<br>
<br>

</body>
</html>

#4 jon3187

  • Group: Member
  • Posts: 4
  • Joined: 18-August 12

Posted 18 August 2012 - 04:42 AM

Theres alotta mistakes in it too im sure..lol but like I said I dont really know what Im doing,and learning it by myself.hope it helps

#5 spike_hacker_inc

  • Group: Member
  • Posts: 1,328
  • Joined: 27-April 05

Posted 18 August 2012 - 05:42 AM

Hey again :) Just for future reference make sure to encase your code with code tags like this: (Using [code ][/ code] without spaces)


int test


As for your code, I have a better idea of what you are trying to do now. But I don't quite understand your problem? You have made a page that can be displayed from a browser and you have mentioned how it already works in Chrome and IE. But you have said it doesn't work in Hotmail? I'm not quite sure what you are trying to do? ... If you could please better explain your situation with bg being white? and maybe please send me a screenshot of what it looks like, the picture will be quite descriptive as-well.

Sorry I didn't mentioning explaining the situation more clearly above, I thought maybe by your code I would understand exactly what it is you would like to do.

Peace Out Posted Image

#6 jon3187

  • Group: Member
  • Posts: 4
  • Joined: 18-August 12

Posted 18 August 2012 - 05:59 AM

Hi,sorry I wasnt more descriptive.but basically its a newsletter that goes out to customers whove purchased products,and when I open the newsletter in mailchimp or any browser directly the background shows normally,the grey one,but in the hotmail(of the user whos going to view the newsletter) it comes white,the background is removed.I basically need it to show in hotmail and other email applications,thts my only issue.

Attached thumbnail(s)

  • Attached Image: white background.jpg

Share this topic:


Page 1 of 1