Home/ Questions/Q 8413985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T01:03:02+00:00

I’m creating an HTML email and since background images can’t be used on anything

  • 0

I’m creating an HTML email and since background images can’t be used on anything but <body> thought I could get around this by making a border image 100% height within a cell. Perhaps it was wishful thinking? I’ve searched at the solutions that worked in the past no longer work in modern browsers. Is there any special trick to making this happen without setting a hard height for the cell?

Here are the things I’ve tried so far:

<td width="25" style="margin:0; padding:0;">
    <img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</td>

stretches the image to 100% height of the entire table (even though the table is nested in a <td>.

<td width="25" height="100%" style="margin:0; padding:0;">
    <div style="height:100%; diplay: block;">
        <img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
    </div>
</td>

ditto

<td width="25" height="1" style="margin:0; padding:0;">
    <div style="height:100%; diplay: block;">
        <img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
    </div>
</td>

setting a smaller td size does not force it to stretch as expected.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I assume you’re mostly running into trouble in Outlook?

    • Hotmail doesn’t recognize background images, but it does seem to recognize height=”100%.”

    • In my own tests, declaring height=”100%” on an image, does successfully stretch it to the height of the cell in the major web-based clients (Hotmail, Gmail, Yahoo).

    • Outlook only allows image stretching to a fixed size (and the image can only be stretched proportionately in both directions). The other clients allow significant stretching in one direction (up to ~4000% of the original size?)

    Tips:

    1) Use a tall image sized to fit Outlook, or slightly taller.

    2) Using height=”100%” will still stretch the image as needed in most non-Outlook clients.

    3) Declaring a vertically repeating background image for the table cell is also useful as a fallback (but it won’t help you with Outlook or Hotmail.)

    Here is my preferred solution for border images:

    <td width="25" height="100%" valign="top" style="background:Transparent url('http://www.mysite.com/images/side-left.jpg') repeat-y;margin:0; padding:0;">
    <img style="margin:0; padding:0;display:block;" src="http://www.mysite.com/images/side-left.jpg" alt="border" width="25" height="100%" />
</td>
    • 0