CODEWITHSUNDEEP
imageoutlookms-wordhtml-emailmessage-body
Frosty Drakin
Frosty Drakin

Reputation: 1

Opening an HTML via WinWord does not preserve the background image

The general idea is simple, I want to open an HTML file with ms-Word, An preserve the background image However, i don't know if i need to aproach from the HTML , CSS, or has something to do with the ms-word file configuration

I have tried the following,alongside some otheres with the usage of <div> as a background

Using an background attribute in the body (tested with and without base64 image,usign base64 so there are not missing references) results in not being shown the background on ms-word, but is shown if open as a webpage

<!doctype html>
 <HTML>
 <head></head>
 <body background="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAADY0lEQVQ4jdWTS28bVRTHz537sOfhB7ET101jklYCJKhUEAsWIKTuqORFmwohJGfBB0HwEVhk1QqkiiIooqUskFBpG6EWEEFtVRASVVPHniSuHcf2+DEznjszB1lKUysxdjcs+ElnMfee+9c5/3MG/neQG5/mjFgET0zH/HeNhHxDGDJLFKBej9a6lrjXsfglxyUrry+V7UFzVy/klAVBXhKan08kvHf0uFwgDDn0lZ7dEvfrLXFlx4NrjEXCV2Lx4P10zj6r5XopIkIFCABK5ZBRixzjRT1d3RYOANwcCCsMM7oRFNJZ56wx312ghk8H+YAA0Vr0SFDUU1Y10mUpFd9OTXlvablemsR88sRyIkIi5gIjTfFkSHX1t28OH2uHYD2flCdnZt28PmcfUqY8OjwiPutEky49kXHoaRaLhi9rCZkdFt2DIfCcrc7w8E0ejx4NJPHiz8mMNuvEiRoczFcQIum+kWyI1xhQVEFBZdxy8KwrZjLuPCABIAgwJptQJDQSxhiGECIOHJrAQAwnpwFBgiH4ipTKVuBSG+TYoncf7cYYgh6TbpeZiuWQO12LrwUNIZ+h7rFgj6FTjdbqLb6iVBzy03aTXR8coM2eXRp3Y4igIdxmXfy+adPv6WI+0ekFpIJSmYoTWOCGrwLHCQ3vswcAwlpE1orGnbWaWLb6yq/0q8ttfOF4e+eX1aTJ+zShA5nncanBpOKf+B0SCOoRv/4wdn+tKj6pOfTbxSWzvzcx1yd//t1iy5sb6jW5pXYP+D2i9cF32ORBq6g/eFQVn9V69PJiwfQBhjbyvSUz9H3y13qTLz8u6T8HFbU/aZjoUOyUtY1SJXrRsul3pwum+/TSPxi3vzyS37o5fUuWVBclIPojokPD9r3E5h9Xsh9fvzCX2a/DRlXScpQfHm3zJKE6n2b4Kp1x+fD+ok3RMfVmyVS/LrfY8qmCWduvMfKvOFUoe42+8uP6trholbUidni4dykJ9Ctqp2JqK4/b7JILWB+lQT/6cLR/Lx5vd1fvJteJR7kRKEdFNIwPivY2tW5lXb9RaojzlqfcOrM7rP0QHHn8lKtfzM3mYsEHh1NengnUW01+d6PFzu249PaZQulfX4/0eJhuSCoPO/zznT5bRQLUlcSUEh6ME/3vAIB/AHWLrz/u38WBAAAAAElFTkSuQmCC"> 
<p>Some text or something</p> 
<p> that should not be misaligned due to the image being in the background plane</p> 
</body> 
</HTML>

Using CSS as an aproach gives the same result, Not being shown on ms-word, but is shown if open as a webpage

<!doctype html>
 <HTML>
 <head>
<style>
body{
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAADY0lEQVQ4jdWTS28bVRTHz537sOfhB7ET101jklYCJKhUEAsWIKTuqORFmwohJGfBB0HwEVhk1QqkiiIooqUskFBpG6EWEEFtVRASVVPHniSuHcf2+DEznjszB1lKUysxdjcs+ElnMfee+9c5/3MG/neQG5/mjFgET0zH/HeNhHxDGDJLFKBej9a6lrjXsfglxyUrry+V7UFzVy/klAVBXhKan08kvHf0uFwgDDn0lZ7dEvfrLXFlx4NrjEXCV2Lx4P10zj6r5XopIkIFCABK5ZBRixzjRT1d3RYOANwcCCsMM7oRFNJZ56wx312ghk8H+YAA0Vr0SFDUU1Y10mUpFd9OTXlvablemsR88sRyIkIi5gIjTfFkSHX1t28OH2uHYD2flCdnZt28PmcfUqY8OjwiPutEky49kXHoaRaLhi9rCZkdFt2DIfCcrc7w8E0ejx4NJPHiz8mMNuvEiRoczFcQIum+kWyI1xhQVEFBZdxy8KwrZjLuPCABIAgwJptQJDQSxhiGECIOHJrAQAwnpwFBgiH4ipTKVuBSG+TYoncf7cYYgh6TbpeZiuWQO12LrwUNIZ+h7rFgj6FTjdbqLb6iVBzy03aTXR8coM2eXRp3Y4igIdxmXfy+adPv6WI+0ekFpIJSmYoTWOCGrwLHCQ3vswcAwlpE1orGnbWaWLb6yq/0q8ttfOF4e+eX1aTJ+zShA5nncanBpOKf+B0SCOoRv/4wdn+tKj6pOfTbxSWzvzcx1yd//t1iy5sb6jW5pXYP+D2i9cF32ORBq6g/eFQVn9V69PJiwfQBhjbyvSUz9H3y13qTLz8u6T8HFbU/aZjoUOyUtY1SJXrRsul3pwum+/TSPxi3vzyS37o5fUuWVBclIPojokPD9r3E5h9Xsh9fvzCX2a/DRlXScpQfHm3zJKE6n2b4Kp1x+fD+ok3RMfVmyVS/LrfY8qmCWduvMfKvOFUoe42+8uP6trholbUidni4dykJ9Ctqp2JqK4/b7JILWB+lQT/6cLR/Lx5vd1fvJteJR7kRKEdFNIwPivY2tW5lXb9RaojzlqfcOrM7rP0QHHn8lKtfzM3mYsEHh1NengnUW01+d6PFzu249PaZQulfX4/0eJhuSCoPO/zznT5bRQLUlcSUEh6ME/3vAIB/AHWLrz/u38WBAAAAAElFTkSuQmCC')!important
;
}
</style>
</head>
 <body> 
<p>Some text or something</p> 
<p> that should not be misaligned due to the image being in the background plane</p> 
</body> 
</HTML>

Trying to set an image in the background using a negative z-index results in the image being shown as aligned with the text (losing the z-index property) when opening with ms-word, its normal if open as a webpage

<!doctype html>
 <HTML>
<head>
</head>
 <body> 
<img height="100" width="100" style="position: absolute;top: 40px; left: 40px;z-index:-1;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAADY0lEQVQ4jdWTS28bVRTHz537sOfhB7ET101jklYCJKhUEAsWIKTuqORFmwohJGfBB0HwEVhk1QqkiiIooqUskFBpG6EWEEFtVRASVVPHniSuHcf2+DEznjszB1lKUysxdjcs+ElnMfee+9c5/3MG/neQG5/mjFgET0zH/HeNhHxDGDJLFKBej9a6lrjXsfglxyUrry+V7UFzVy/klAVBXhKan08kvHf0uFwgDDn0lZ7dEvfrLXFlx4NrjEXCV2Lx4P10zj6r5XopIkIFCABK5ZBRixzjRT1d3RYOANwcCCsMM7oRFNJZ56wx312ghk8H+YAA0Vr0SFDUU1Y10mUpFd9OTXlvablemsR88sRyIkIi5gIjTfFkSHX1t28OH2uHYD2flCdnZt28PmcfUqY8OjwiPutEky49kXHoaRaLhi9rCZkdFt2DIfCcrc7w8E0ejx4NJPHiz8mMNuvEiRoczFcQIum+kWyI1xhQVEFBZdxy8KwrZjLuPCABIAgwJptQJDQSxhiGECIOHJrAQAwnpwFBgiH4ipTKVuBSG+TYoncf7cYYgh6TbpeZiuWQO12LrwUNIZ+h7rFgj6FTjdbqLb6iVBzy03aTXR8coM2eXRp3Y4igIdxmXfy+adPv6WI+0ekFpIJSmYoTWOCGrwLHCQ3vswcAwlpE1orGnbWaWLb6yq/0q8ttfOF4e+eX1aTJ+zShA5nncanBpOKf+B0SCOoRv/4wdn+tKj6pOfTbxSWzvzcx1yd//t1iy5sb6jW5pXYP+D2i9cF32ORBq6g/eFQVn9V69PJiwfQBhjbyvSUz9H3y13qTLz8u6T8HFbU/aZjoUOyUtY1SJXrRsul3pwum+/TSPxi3vzyS37o5fUuWVBclIPojokPD9r3E5h9Xsh9fvzCX2a/DRlXScpQfHm3zJKE6n2b4Kp1x+fD+ok3RMfVmyVS/LrfY8qmCWduvMfKvOFUoe42+8uP6trholbUidni4dykJ9Ctqp2JqK4/b7JILWB+lQT/6cLR/Lx5vd1fvJteJR7kRKEdFNIwPivY2tW5lXb9RaojzlqfcOrM7rP0QHHn8lKtfzM3mYsEHh1NengnUW01+d6PFzu249PaZQulfX4/0eJhuSCoPO/zznT5bRQLUlcSUEh6ME/3vAIB/AHWLrz/u38WBAAAAAElFTkSuQmCC" />
<p>Some text or something</p> 
<p> that should not be misaligned due to the image being in the background plane</p> 
</body> 
</HTML>

in general, seems like adding any <img> tag will have the same result, regardless of attributes

About ms-word configurations, I've tried:

1 Enabling "Options"> "Display" >"Print background colors and images"

2 Enabling "Options"> "Advanced"> "show background on print view"

3 Saving a doc document with a background image as HTML, and replicating the tags used in (i believe it uses other file to set the images positions)

Upvotes: 0

Views: 51

Answers (1)

Eugene Astafiev
Eugene Astafiev

Reputation: 49395

Outlook doesn't support base64 encoded images. Instead, you need to save the image as file to the disk and then add it as an embedded attachment. Only after these steps you can refer to such images in the message body. In VBA you could use the following code for such tasks:

attachment = MailItem.Attachments.Add("c:\temp\MyPicture.jpg")
attachment.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001F", "MyId1")
MailItem.HTMLBody = "<html><body>Test image <img src=""cid:MyId1""></body></html>"

You can read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 article.

Upvotes: 0

Related Questions