CODEWITHSUNDEEP
cssoutlook
TrevorGoodchild
TrevorGoodchild

Reputation: 1060

How can I display embedded Base64 encoded images in Outlook email

I'm working on an application that sends notification emails to users. The app contains the functionality for a user to create an email, display it in their browser, and then send that email out. We designed it to use Base64 encoded images that are embedded in the CSS as follows:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Notification Email</title>
    <style>

        html {
            box-sizing: border-box;
            overflow: -moz-scrollbars-vertical;
            overflow-y: scroll;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        .bg {
            flex: 1 1 0px;
            letter-spacing: 2px;
            color: white;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            padding: 1vh 0;
        }

        .bg:nth-child(1) {
            background-color: #DC1431;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IC0xNjEuOSA1MjEuMSAyMzguNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyA3OTkuOSAtMTYxLjkgNTIxLjEgMjM4Ljc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNFMzE4Mzc7fQ0KCS5zdDF7ZmlsbDp1cmwoI1NWR0lEXzFfKTt9DQoJLnN0MntmaWxsOiMwMDczQ0Y7fQ0KCS5zdDN7ZmlsbDp1cmwoI1NWR0lEXzJfKTt9DQoJLnN0NHtmaWxsOiMwMTIxNjk7fQ0KCS5zdDV7ZmlsbDp1cmwoI1NWR0lEXzNfKTt9DQoJLnN0NntmaWxsOiMwMDUyQzI7fQ0KCS5zdDd7ZmlsbDp1cmwoI1NWR0lEXzRfKTt9DQo8L3N0eWxlPg0KPHJlY3QgeD0iNzk5LjkiIHk9Ii0xNjEuNSIgY2xhc3M9InN0MCIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC43Ii8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45NDE0IiB5MT0iMTUwOC4zMDQ5IiB4Mj0iMz22LjQ4MjciIHkyPSIxMjU0LjkzNDQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgODYzLjA3IDE0MzYuMjAwMSkiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNDNDEyMzAiLz4NCgk8c3RvcCAgb2Zmc2V0PSI5LjAwMDAwMGUtMDAyIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0IxMzMxO3N0b3Atb3BhY2l0eTowLjc5Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC4xOCIgc3R5bGU9InN0b3AtY29sb3I6I0QxMTUzMztzdG9wLW9wYWNpdHk6MC41OCIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuMjkiIHN0eWxlPSJzdG9wLWNvbG9yOiNENzE2MzQ7c3RvcC1vcGFjaXR5OjAuNCIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNCIgc3R5bGU9InN0b3AtY29sb3I6I0RCMTYzNTtzdG9wLW9wYWNpdHk6MC4yNSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNTIiIHN0eWxlPSJzdG9wLWNvbG9yOiNERjE3MzY7c3RvcC1vcGFjaXR5OjAuMTQiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjY1IiBzdHlsZT0ic3RvcC1jb2xvcjojRTExODM3O3N0b3Atb3BhY2l0eTo2LjAwMDAwMGUtMDAyIi8+DQoJPHN0b3AgIG9mZnNldD0iMC43OSIgc3R5bGU9InN0b3AtY29sb3I6I0UzMTgzNztzdG9wLW9wYWNpdHk6MS4wMDAwMDBlLTAwMiIvPg0KCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMzE4Mzc7c3RvcC1vcGFjaXR5OjAiLz4NCjwvbGluZWFyR3JhZGllbnQ+DQo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTMyMSw3Ny4ydi0yMzguN2gtMzguOWMtMTU0LDQ4LjItMzE3LjEsMTQzLjYtNDQwLjIsMjM4LjdIMTMyMXoiLz4NCjwvc3ZnPg0K);
        }

        .bg:nth-child(2) {
            background-color: #0073CF;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IDEzMC41IDUyMS4xIDIzOC43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDc5OS45IDEzMC41IDUyMS4xIDIzOC43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRTMxODM3O30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KCS5zdDJ7ZmlsbDojMDA3M0NGO30NCgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDR7ZmlsbDojMDEyMTY5O30NCgkuc3Q1e2ZpbGw6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDZ7ZmlsbDojMDA1MkMyO30NCgkuc3Q3e2ZpbGw6dXJsKCNTVkdJRF80Xyk7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9Ijc5OS45IiB5PSIxMzAuOCIgY2xhc3M9InN0MiIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC43Ii8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45NDE0IiB5MT0iMTIxNS45NSIgeDI9IjM2My40ODI3IiB5Mj0iOTYyLjU3OTQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgODYzLjA3IDE0MzYuMjAwMSkiPg0KCTxzdG9wICBvZmZzZXQ9IjguMDAwMDAwZS0wMDIiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDUyQzIiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjE2IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA1OUM1O3N0b3Atb3BhY2l0eTowLjgiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjI1IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA2MEM3O3N0b3Atb3BhY2l0eTowLjU5Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC4zNSIgc3R5bGU9InN0b3AtY29sb3I6IzAwNjZDQTtzdG9wLW9wYWNpdHk6MC40MSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuNDUiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDZBQ0M7c3RvcC1vcGFjaXR5OjAuMjYiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjU2IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA2RUNEO3N0b3Atb3BhY2l0eTowLjE0Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC42OCIgc3R5bGU9InN0b3AtY29sb3I6IzAwNzFDRTtzdG9wLW9wYWNpdHk6Ni4wMDAwMDBlLTAwMiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuODEiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDczQ0Y7c3RvcC1vcGFjaXR5OjEuMDAwMDAwZS0wMDIiLz4NCgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDA3M0NGO3N0b3Atb3BhY2l0eTowIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHBhdGggY2xhc3M9InN0MSIgZD0iTTg0MS45LDM2OS41SDEzMjFWMTMwLjho33M4LjlDMTEyOC4xLDE3OSw5NjQuOSwyNzQuNSw4NDEuOSwzNjkuNXoiLz4NCjwvc3ZnPg0K);
        }

        .bg:nth-child(3) {
            background-color: #0052C2;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IDQxNi41IDUyMS4xIDIzOC43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDc5OS45IDQxNi41IDUyMS4xIDIzOC43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRTMxODM3O30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KCS5zdDJ7ZmlsbDojMDA3M0NGO30NCgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDR7ZmlsbDojMDEyMTY5O30NCgkuc3Q1e2ZpbGw6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDZ7ZmlsbDojMDA1MkMyO30NCgkuc3Q3e2ZpbGw6dXJsKCNTVkdJRF80Xyk7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9Ijc5OS45IiB5PSI0MTYuOCIgY2xhc3M9InN0NiIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC43Ii8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45NDE0IiB5MT0iOTI5Ljk1IiB4Mj0iMzYzLjQ4MjciIHddPSI2NzYuNTc5NCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSA4NjMuMDcgMTQzNi4yMDAxKSI+DQoJPHN0b3AgIG9mZnNldD0iMi4wMDAwMDBlLTAwMiIgc3R5bGU9InN0b3AtY29sb3I6IzAxMjE2OSIvPg0KCTxzdG9wICBvZmZzZXQ9IjMuMDAwMDAwZS0wMDIiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMTIzNkM7c3RvcC1vcGFjaXR5OjAuOTciLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjEzIiBzdHlsZT0ic3RvcC1jb2xvcjojMDEzMTg2O3N0b3Atb3BhY2l0eTowLjY3Ii8+DQoJPHN0b3AgIG9mZnNldD0iMC4yNSIgc3R5bGU9InN0b3AtY29sb3I6IzAwM0Q5QztzdG9wLW9wYWNpdHk6MC40MiIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuMzciIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDQ2QUQ7c3RvcC1vcGFjaXR5OjAuMjMiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjUyIiBzdHlsZT0ic3RvcC1jb2xvcjojMDA0REI5O3N0b3Atb3BhY2l0eTowLjEiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjY5IiBzdHlsZT0ic3RvcC1jb2xvcjojMDA1MUMwO3N0b3Atb3BhY2l0eToyLjAwMDAwMGUtMDAyIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzAwNTJDMjtzdG9wLW9wYWNpdHk6MCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04NDEuOSw2NTUuNUgxMzIxVjQxNi44aC0zOC45QzExMjguMSw0NjUsOTY0LjksNTYwLjUsODQxLjksNjU1LjV6Ii8+DQo8L3N2Zz4NCg==);
        }

        .bg:nth-child(4) {
            background-color: #012169;
            background-image: url(data:image/svg;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9Ijc5OS45IDY5Mi41IDUyMS4xIDIzOC43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDc5OS45IDY5Mi41IDUyMS4xIDIzOC43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRTMxODM3O30NCgkuc3Qxe2ZpbGw6dXJsKCNTVkdJRF8xXyk7fQ0KCS5zdDJ7ZmlsbDojMDA3M0NGO30NCgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8yXyk7fQ0KCS5zdDR7ZmlsbDojMDEyMTY5O30NCgkuc3Q1e2ZpbGw6dXJsKCNTVkdJRF8zXyk7fQ0KCS5zdDZ7ZmlsbDojMDA1MkMyO30NCgkuc3Q3e2ZpbGw6dXJsKCNTVkdJRF80Xyk7fQ0KPC9zdHlsZT4NCjxyZWN0IHg9Ijc5OS45IiB5PSI2OTIuOCIgY2xhc3M9InN0NCIgd2lkdGg9IjUyMS4xIiBoZWlnaHQ9IjIzOC4zIi8+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE5OC45MTMzIiB5MT0iNjU0LjE2NDUiIHgyPSIzNjMuMzk3NiIgeTI9IjQwMC44ODE2IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDg2My4wNyAxNDM2LjIwMDEpIj4NCgk8c3RvcCAgb2Zmc2V0PSI5LjAwMDAwMGUtMDAyIiBzdHlsZT0ic3RvcC1jb2xvcjojMDAwQTIzIi8+DQoJPHN0b3AgIG9mZnNldD0iMC4xOCIgc3R5bGU9InN0b3AtY29sb3I6IzAwMTEzNztzdG9wLW9wYWNpdHk6MC43MSIvPg0KCTxzdG9wICBvZmZzZXQ9IjAuMzciIHN0eWxlPSJzdG9wLWNvbG9yOiMwMTFBNTM7c3RvcC1vcGFjaXR5OjAuMzEiLz4NCgk8c3RvcCAgb2Zmc2V0PSIwLjYxIiBzdHlsZT0ic3RvcC1jb2xvcjojMDExRjY0O3N0b3Atb3BhY2l0eTo3LjAwMDAwMGUtMDAyIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6IzAxMjE2OTtzdG9wLW9wYWNpdHk6MCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik04NDEuOSw5MzEuMkgxMzIxVjY5Mi44aC0zOC45QzExMjguMSw3NDEsOTY0LjksODM2LjMsODQxffOTMxLjJ6Ii8+DQo8L3N2Zz4NCg==);
        }


        body {
            margin: 0;
            background: #fafafa;
            font-family: 'Connections';
            font-size: 12px
        }

    </style>
</head>

<body>
    <div class="content">
        <div class="head">
            <span class="bg">Initech</span>
            <span class="bg">Initrode</span>
            <span class="bg">Inacan</span>
            <span class="bg">Inabag</span>
        </div>

The preview email, when viewed from the app, works fine but when the actual is sent out the images are not displaying and the formatting for the header links is misplaced. There is an image that's embedded directly, and it shows up fine, so I'm inclined to believe it's something to do with CSS

Trying to view this in Outlook 2013, hoping someone can tell me if this is even possible.

Upvotes: 0

Views: 4299

Answers (2)

Eugene Astafiev
Eugene Astafiev

Reputation: 49395

The background-image property from CSS is unsupported in Outlook. You can read more about that in the following series of articles:

You can add a web reference to any external image or just add an embedded image instead, for example:

    Set objOL = CreateObject("Outlook.Application")
    Set objMail = objOL.CreateItem(olMailItem)
    objMail.Attachments.Add "C:\pictest.jpg"
    objMail.HTMLBody = "<html><p>This is a picture.</p>" & _
                   "<img src='cid:pictest.jpg' height=480 width=360>"
    objMail.Display

See To add an embedded image to an HTML message for more information.

Upvotes: 3

Dmitry Streblechenko
Dmitry Streblechenko

Reputation: 66235

Word (whcih renders HTML messages in Outlook) does not support base64 images embedded into the HTML body. It only supports external images and images stored in attachments.

Upvotes: 0

Related Questions