I am creating a new template for a newsletter. The following code produces what I want to see but as you will all know background images do no play well in Outlook.
<table style="width: 600px;" align="center" border="0">
<tbody>
<tr>
<td style="height: 60px; padding: 5px; border-radius: 5px 5px 0px 0px; vertical-align: middle; background-color: white;"
background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png">
<p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
SUBJECT HEADING</strong><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png"
align="right"></p>
</td>
</tr>
</tbody>
</table>
I found an answer on here recommending using https://backgrounds.cm/ so here is the code I got back.
<table style="width: 600px;" align="center" border="0">
<tbody>
<tr>
<td background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" bgcolor="#929292" width="600" height="61" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:61px;">
<v:fill type="tile" src="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" color="#929292" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
SUBJECT HEADING</strong><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png"
align="right"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png"
align="right"></p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Which give me this in Outlook
I have tried to fix this but I'm not a particularly skilled programmer. I can usually intuit what the problem is but I'm at a loss here.
The grey bar definitely needs to be a background image as I need to place text and images on top (the smaller images will be links at a later stage).
Hope you guys can help.
Images are normally inline elements, not block. You can't make inline elements "align" left or right. So putting them within a block such as a paragraph may seem intuitively to solve that issue, except that the alignment needs to occur via that block element (the paragraph, in this case).
Since you want the text aligned left and the images aligned right, we really need two block level elements, and the best way to do that is to create a table.
Ensure you have the table going the full width of the available space (width="100%").
I haven't addressed default padding and other defaults, but here's the basic way forward that works:
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<table style="width: 600px;" align="center" border="0">
<tbody>
<tr>
<td background="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" bgcolor="#929292" width="600" height="61" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:61px;">
<v:fill type="tile" src="http://osmondgroup.co.uk/ebulletin/Images/greybar.png" color="#929292" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%">
<tr>
<td>
<p style="font-size:18px; color:white; font-family: Arial, sans-serif; line-height: 1.8; text-indent: 10px;"><strong>
SUBJECT HEADING</strong></p>
</td>
<td style="text-align: right;"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Planet.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Workplace.png"><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20Thinking.png" ><img src="http://osmondgroup.co.uk/ebulletin/Images/Healthy%20People.png">
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
P.S. you might think you can just add "display:block" to the images, but Outlook doesn't let you do that. It will just ignore that style.