Results 1 to 2 of 2
  1. #1
    4 Star Lounger
    Join Date
    Mar 2002
    Location
    Sacramento, California, USA
    Posts
    509
    Thanks
    4
    Thanked 1 Time in 1 Post

    HTML, text superimposed on an image

    I need to superimpose text on an image. I've tried two techniques, and neither one works all the time.

    Technique #1 is to define a table with one cell. The text is in the cell; the image is the background for the cell, defined in CSS with the background-image property.

    Technique #2 is to display the image as content (not background) in a table cell and use the CSS position property to superimpose the text on the image. Roughly speaking, the HTML looks like this:

    Code:
    <div style="position:relative; width:100%">
    
    
       <table style="margin-left:auto; margin-right:auto">
          <tr>
             <td> <img src="..." /> </td>
          </tr>
       </table>
    
       <div style="position:absolute">
          <table style="margin-left:auto; margin-right:auto">
             <tr>
                <td> text goes here </td>
             </tr>
          </table>
       </div>
    </div>
    The problem with the first technique is that because it uses a background image, most browsers won't print the image unless the user sets a special option in page setup... an option that most users don't know exists.

    The problem with the second technique is that the application has to convert the document to PDF, and the converter that I'm using (mPDF, see http://mpdf1.com/mpdf) doesn't understand the "position" property. Consequently it places the text after the image instead of on top of it.

    My question: is there a way to superimpose text on an image without using a background image, so that browsers will print the image by default, and without using the position property, so that mPDF will produce correct output?

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts
    Quote Originally Posted by jsachs177 View Post
    My question: is there a way to superimpose text on an image without using a background image, so that browsers will print the image by default, and without using the position property, so that mPDF will produce correct output?
    I can't think of any, but can you serve different pages to regular users and your mPDF process? If this page is generated using ASP(X) or PHP, etc., e.g., by adding ?pdf=true to the URL.
    Last edited by jscher2000; 2011-08-14 at 21:16.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •