I'm working on a design that is going to look like http://dl.dropbox.com/u/54808/email_design.png The header area in the design is similar to what the website is going to look like.
You can see that the main content area is only 600px wide but that the decorative header area is much wider. Behind it there's a gradient that is about 650px high.
What I'd like to know is how to work it so that the header image is centred regardless of how wide the viewport is. I've been looking at the articles and forum posts about the techniques for getting bg-images to work in Outlook, but they seem to either be for repeating images or single images that are the width of the layout, i.e. not for non-repeating images that extend outside the boundaries of the layout.
Can what I want to do be achieved with HTML email (cross-browser) or should I think about changing the design?
I've decided to make things easier for myself by just having the green gradient as the background image, but am running into another problem. To get the image to show in Gmail etc, I need to add it as a background attribute to the containing table, but because the image is a certain height and is then supposed to fade into the body background colour, it should only repeat-x. So is there a way to get a table background to only repeat in a certain direction? I tried adding style="background-repeat:repeat-x" to the table as well, but that just kills the background entirely. Do I need to make the background image really tall so that it will cover the whole length of an email?
Anyone got any ideas on this or is it undoable?
That link seems to be broken. Gradients can actually be achieved by made using a series of cells 1px wide inside a table. Here's a simple example for your reference:
<table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="1" bgcolor="#CCCCCC"></td> <td width="1" bgcolor="#999999"></td> <td width="1" bgcolor="#666666"></td> <td width="194" align="center"><p>Text</p> <p> </p></td> <td width="1" bgcolor="#666666"></td> <td width="1" bgcolor="#999999"></td> <td width="1" bgcolor="#CCCCCC"></td> </tr> </table>
Obviously, the wider the gradient, the more cell you'll need but it definitely is achievable without the use of any images and this will work across all email clients.
As far as background images in Outlook 2007, you may find this thread by Brian helpful:
Hi Jordan, sorry the image link works again now. Basically it looks like that but without the faded images of wheels etc, just the green gradient. The problem is that the gradient needs to go from top to bottom, not left to right/right to left as in the example you've given.
I did have a look at Brian's thread but it seems to be targetted at non-repeating background images.
Now that I can see the graphic I can see it's a little trickier. Given the fact that the image is wider than your actual email I'd just create a super long version that could fix in based on any email length. Just make sure it's a GIF file as you'll find these tend to smaller and sharper in size.
Your other option is to physically set your email width to match the background graphic, using the header as a foreground image and then fading the gradient into a solid green and setting the remainder of the background to the solid green background color.
I think if you set your header graphic (seems to be total overkill in my opinion and very green!) to be smaller and to match the width of your email you may find you have a lot more room to work with and won't have to sacrifice much of your existing look.
Actually, it's not that wide anymore. The only bits that are remaining are the green gradient and the green bar (i.e. ignore the wheels, the angled stripes etc.) which should fit the viewport, no matter how wide it is. What I've got so far is nearly there except that when you set a background attribute on a table it repeats both horizontally and vertically, so you get these stripes of gradient going down the page. I just want to eliminate the vertical repeat if it's possible.