Embed Image in the HTML

Safe way to use a background image in an email

Page 1 of 1

6 Replies - 12509 Views - Last Post: 13 March 2008 - 02:46 PM

#1 RobC   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 24-March 07

Embed Image in the HTML

Posted 22 November 2007 - 08:24 PM

I am attempting to create an 'email merge'.
(There are not many Google hits on that expression)
User would like the email to be HTML (not plain text).
Also he would like his Letterhead included.
It goes all the way down the left, and along the bottom.
Thus it should appear as if it is a background, with the text positioned as if it is a layer on top of it (as distinct from being somewhere outside of the image).

I would prefer that the image be truly embedded, rather than being an attachment or a link.

I actually managed to get Word to create a web page, with the image, and text over-laid. (Both positioned correctly.)
It opens up in IE ok
It however does not show the image in FireFox.
I assume that flaw is caused by either -
- The horrible HTML that Word creates
or
- Problems because the image was NOT embedded.

I 'googled' and found quite a few hits, with nearly explained solutions (nearly to my lack of web experience).
Base64 seems to get mentioned a lot.

Does anyone know of a HTML editor that would make embedding an image easy for me ?
Or am I looking for the 'holy grail' ?

Thanks,
Rob

PS
If my request is impossible, perhaps guidance on a safe way to include the image as an attachment ? (It is the background image of the email, but it finds it from it's own attachment)

I have attached an image to show others what I am attempting to achieve.
The image needs to occupy the same position as the text.

Attached image(s)

  • Attached Image

This post has been edited by RobC: 23 November 2007 - 01:39 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Embed Image in the HTML

#2 Mikhail   User is offline

  • Bastard Operator From Hell
  • member icon

Reputation: 59
  • View blog
  • Posts: 1,378
  • Joined: 26-October 07

Re: Embed Image in the HTML

Posted 23 November 2007 - 12:18 AM

Lets see,

Did you try this method?

<html>
<body>
<p> Paragraph Before the Picture which is up to you</p>
<img src="http://example.com/images/filename.jpg" <!-- This the link to your picture you have to upload it somewhere --> 
	width="0"	<!-- Edit those parts width and height to the size of your picture -->
	height="0" 
	alt="my picture"> <!-- this displays the caption of your picture -->
<br>
This is for text under picture
<p>
This is a paragraph displaying any text under picture
</p>
</body>
</html>



Have you tried this, this should work in all browsers however not all email client can display HTML emails if they are disabled.
Was This Post Helpful? 0
  • +
  • -

#3 RobC   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 24-March 07

Re: Embed Image in the HTML

Posted 23 November 2007 - 01:46 AM

Mikhail, thanks for the response.

I have attached an image to my first post.

Will your approach allow both the the image and the text to occupy the same spot ?
Does you approach, attach the image, so that the email knows where to find it, without having to follow a link to a server ?
Do you know of a nice simple HTML editor that I can use ?

Regards,
Rob

This post has been edited by andrewsw: 23 October 2013 - 04:57 AM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#4 Mikhail   User is offline

  • Bastard Operator From Hell
  • member icon

Reputation: 59
  • View blog
  • Posts: 1,378
  • Joined: 26-October 07

Re: Embed Image in the HTML

Posted 23 November 2007 - 11:31 AM

You could use PSpad for html editor or Dreamweaver which is expensive the script i gave you should display the whole image in email.
Was This Post Helpful? 0
  • +
  • -

#5 Moshambi   User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Embed Image in the HTML

Posted 25 November 2007 - 07:21 PM

View PostMikhail, on 23 Nov, 2007 - 12:18 AM, said:

Lets see,

Did you try this method?

<html>
<body>
<p> Paragraph Before the Picture which is up to you</p>
<img src="http://example.com/images/filename.jpg" <!-- This the link to your picture you have to upload it somewhere --> 
	width="0"	<!-- Edit those parts width and height to the size of your picture -->
	height="0" 
	alt="my picture"> <!-- this displays the caption of your picture -->
<br>
This is for text under picture
<p>
This is a paragraph displaying any text under picture
</p>
</body>
</html>



Have you tried this, this should work in all browsers however not all email client can display HTML emails if they are disabled.



im not sure if that is what RobC was trying to make happen. In your code it adds the text below the image in the email, and he wants the text to be on top of the image.

now i dont know about emailing that much yet, but i would assume that there is some way to put it on the background within one of the element tags instead of using <img src>

but im not sure on that i just thought i would point out to you Mikhail that code was not precisely what RobC was looking for.
Was This Post Helpful? 0
  • +
  • -

#6 Byapti   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 13-September 07

Re: Embed Image in the HTML

Posted 11 December 2007 - 05:43 AM

Hi,
I think “Sending HTML with Embedded Image in .NET” article on
http://aspalliance.c...mage_in_NET.all may be helpful in this discussion.

This popular white paper is written by a software engineer from our organization Mindfire Solutions (http://www.mindfiresolutions.com).

I hope you find it useful!

Cheers,
Byapti
Was This Post Helpful? 0
  • +
  • -

#7 SSVegito888   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 13-March 08

Re: Embed Image in the HTML

Posted 13 March 2008 - 02:46 PM

RobC,

if you are still looking for an HTML editor, try Trellian WebPage.



http://www.trellian.com/webpage/



It has a GUI (Drag & Drop) and a code based interface.

Plus, it's FREE

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1