Text Over an Image with CSS

[paulq]

I was wondering if anyone could help me in figuring out properly superimposing text over an image using XHTML and CSS. My goal is to display text of varying length (generated in PHP) centered over an image on a web page to be printed. This web page
http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480021
shows three ways to do this but none fit my exact needs.

The first method (making the image a background) would be perfect except that I need these images to persist when the user prints the page. The second method doesn't seem to work at all.

The third method uses absolute positioning which would work well except I need to center align a variable-length string of text (using PHP). So the best choice I have found is relative positioning of the text but that offers a downfall as well; the CSS moves the text exactly where I need it (centered and all) however, it leaves a blank space where the text originally was causing there to be large gaps in my page.

Does anyone have any tips for a neophyte web designer or a workaround to achieve the proper layout?

[BonRouge]

Have you tried positioning the image absolutely instead of the text?

[paulq]

Thanks for the reply. It seems that that may work except the image overlays my text and not the other way around. I mess with the z-index of both but since my text is in a table the only option I have is to use a z-index of -1, putting the image behind the table (which has a non-transparent background), or use a z-index > -1, putting the image infront of everything else.

[Nikegurl24]

try lissa explains it all...that site is pretty helpful.

[Arbitrator]

You could use the background method and instruct your users to use their built-in browser functions...

If you're using Firefox 1.5 or Netscape 8:
go to File > Page Setup...
under Options, check the Print Background (colors & images) check-boxIf you're using Internet Explorer 6:
go to Tools > Internet Options...
click the Advanced tab
under Settings, open the Printing collapse-menu (opened automatically)
check the Print background colors and images check-boxIf you're using Opera 9:
go to Print options...
check the Print page background check-box (enabled by default)Copy and pasted that from here (http://forums.dreamincode.net/index.php?showtopic=16827&st=0&p=159436&#entry159436).

[paulq]

Thanks for the tips on how to print background images\colors, it's helpful to me but I don't count on my users being too computer inclined so I doubt they will follow those tips. The absolute positioning of the picture seems to work well enough so I will have to play with that and possibly make seperate CSS sheets per browser used. Thanks for the help, All.