0

I have a problem and that's been addressed on SO already, it's about having text over an image, now the text I have is a more than a few lines.

It's something like this: 

<h1>Hellow</h1>
<p>Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum Lorium ipsum lorium ipsum</p>

the above had to go over an image.

This issue was addressed on this thread. Now I tried all the solution possible in the thread but nothing worked for me.

The solution offered by gufa, that's the one I tried and the one offered by zano, but it wasn't the solution I wanted.

I need to do this for an emailer, not a webpage. That's the biggest problem.

I tried the following:

  <tr>
      <td valign="top" class="headerContent">
            <div style="position:relative;" >
                  <img src="http://i.imgur.com/FzuJB5L.jpg" style="max-width:600px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
                                   <div style="position:absolute;top:30px;left:50px;right:50px;text-align:center;">
                                    <h1 style="display:inline-block;">Header</h1>
                                        <p style="font-size:13px;text-align:justify;">
                                                    We are a company based startup providing a unique service for washing .At lorium we implement innovative services for both owners &amp; lorium that are hassle free &amp; also saves time and money. lorium is proud to bring a change in people’s lives by delivering them peace of mind in the lorium domain. <br><br>
                                                    We aim to provide assured lorium returns to owners of lorium! 

                                    </p>    
                                  </div>
                                </div>
                              </td>
                           </tr>

and that really didn't work at all. Is there any simple solution to this issue?

Edit

The solution of float and relative positioning works actually, but unfortunately, position:relative doesn't take an element out of the flow, which is what you want and floats are not really what I want.

halfer
  • 19,824
  • 17
  • 99
  • 186
Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174

1 Answers1

1

This is really weird. Why not just set the image as a background, then this will be a non-issue.

And stay right away from positioning and floats.

Use http://backgrounds.cm/ to help with client support, especially Outlook.

  • tried that and it worked , but i am not sure background images is the way to go . – Alexander Solonik Jan 12 '15 at 05:54
  • if compatibility is your concern, backgrounds are much more well supported in email than `position` or `text-align:justify` – zazzyzeph Jan 12 '15 at 16:18
  • ^ Exactly what ZephyrusDigital said. Your only other option is making it one image which isn't best practice either. Trust me when I say, you will never get it working your way in the majority of email clients (which should be you aim). Using my suggestion will. –  Jan 12 '15 at 18:53