CODEWITHSUNDEEP
htmlcssoutlookgmail
William McCulla
William McCulla

Reputation: 11

Email CSS/HTML - Image position

I'm currently working on an email template for a project. Basically, I have a table set up, one row contains some stripes, the next a black bar (to match the site's layout).

Question is: Is there a way to place an image in the table, and have it continue into the second row without destroying the formatting of that second row?

Many thanks, Will

EDIT:

This is the outlook at the moment:

<table style="width: 100%; height:18vh;" cellspacing="0" cellpadding="0" style=" border-collapse: collapse; border-spacing: 0;" background="http://s588191233.websitehome.co.uk/projects/kindle/img/emailwallpaper.jpg">
<tr height="80%">
    <td>
    </td>
</tr>
<tr style="background: #222; height: 20%;">
    <td> 
    </td>
</tr>
</table>

Trying to have the image appearing on the left hand side. Normally, I would achieve this via absolute positioning, but I can't as its email. We tried to approach of segmenting the image, but getting it to scale between email clients proved nigh on impossible.

Upvotes: 1

Views: 1534

Answers (1)

samurai_jane
samurai_jane

Reputation: 835

You can do this with "rowspan". The code is below and here is a fiddle.

    <table style="width: 100%; height:18vh;" cellspacing="0" cellpadding="0" style=" border-collapse: collapse; border-spacing: 0;">
        <tr>
            <td rowspan="2" style="background: url('https://leadingpersonality.files.wordpress.com/2013/05/smug-smile.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100px;"></td>
            <td style="background-image: url('http://s588191233.websitehome.co.uk/projects/kindle/img/emailwallpaper.jpg');">
                <div style="height: calc(18vh * .8);"></div>
            </td>
        </tr>
        <tr>
                <td style="background: #222;"><div style="height: calc(18vh * .2);"></div></td>
        </tr>
    </table>

Upvotes: 1

Related Questions