Results 1 to 2 of 2
2011-08-13, 09:21 #1
- Join Date
- Mar 2002
- Sacramento, California, USA
- 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:
<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 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?
2011-08-14, 20:13 #2
- Join Date
- Feb 2001
- Silicon Valley, USA
- Thanked 93 Times in 89 Posts