Text over image BUT being able to copy both

[crunkie]

So we all know it's easy to put text over an image - you just set the image as a background. If you then open it in your browser, do 'select all' and 'copy', it won't copy the background image,just the text.
What I would like to be able to do is copy the image as well:
I'm doing an e-newsletter for a charity which they will be mailing out. The plan is for them to open the html file in their browser, select everything, copy and then paste into an email (using a client like Outlook).

Any ideas on how I can do this? I'm using just divs, but if there's another way, for example that can only be done in html, i'd be happy with that! This is driving me mad!

Thanks again guys.

[kidwon]

Well I'm not sure that's possible!
First copying anything from a web page is how your browser is made doing it!
When it's about text all browsers support it but other data....
Second on other hand when placing the content in Outlook is how this application works and how interprets the given data, either!
So we are talking about OS applications here and communication between them which isn't the simple web designing, you see?
Probably there is a way to tell the browser what to copy but in any case it's not pure HTML and CSS for sure!!!

Probably the best way is a link for downloading an outlook file containing the page with some place in it for the mail massage itself! If that is possible, either but it sounds more reasonable

[Kraai]

Or

You can download the background image onto your pc, and save it in outlook as a background to a new message, and simply paste the text over it.

[crunkie]

Thanks for the replies,

I never did end up managing to do it, even after trying z-index and all sorts.
I was designing a newsletter template for a group of different ppl to use, hence why I couldn't just download it onto my comp.

Thanks again anyway, and sry for the late reply! :)

[shaya4207]

Try to put the image in the actual html, not as a background, then give it 'position: absolute' and the text put inside another <div> (in the same <div> as the image) and have it 'position: relative', that should work...

<div id="wrapper" style="position: relative">
  <img src="your_image.jpg" style="position: absolute; top: 0; left: 0">
  <div id="second_div" style="position: relative; top: 0; left: 0">
    And your text here...
  </div>
</div>

[crunkie]

Thanks Shaya4207, I will try it out with what I've got and get back to you.

[crunkie]

Try to put the image in the actual html, not as a background, then give it 'position: absolute' and the text put inside another <div> (in the same <div> as the image) and have it 'position: relative', that should work...

<div id="wrapper" style="position: relative">
  <img src="your_image.jpg" style="position: absolute; top: 0; left: 0">
  <div id="second_div" style="position: relative; top: 0; left: 0">
    And your text here...
  </div>
</div>

Yep this worked, the text and everything else worked on top, cheers.

Unfortunately it still won't paste properly in my email client.
But still happy that I now know how to do it for the web at least :)

[shaya4207]

I'm happy to be able to help, I'm not sure exactly how to work with emails.

P.S. Please post the thread as 'Solved'

[fuston05]

What i usually do, and this should paste properly... I would take my image and use Gimp or Photoshop and layer my text over in the image so that it becomes a part of the image. Just one way of doing it. hope this helps :)