How to writte text in the middle of an image without positioning and z-index?
I am creating an email template and i need to writte text in the "middle" of an image, but some email system's doesn't allow positioning, what can i use?
<img src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Black_background-5.jpg" style="width:400px; height: 350px;" /> <p style="color:blue;">SOME TEXT FOR CONTENT..</p>
If you're doing this for email, I'd recommend adding the text to the image itself, rather than positioning it with a background-image. The reason for this is that background-image isn't very well supported (particularly in Outlook 07/10/13) and will have to fallback to a solid colour, which may ruin the entire design.
I'd also move away from p tags, as they can render differently in different email clients.
Here's a JSFiddle of the finished code: https://jsfiddle.net/czxrp2hf/1/
Also, this link is quite helpful for finding out what CSS is supported in which email clients: https://www.campaignmonitor.com/css/
All in all Natalie has right. If you want to try something like this:
<td valign="middle" background="your_image.jpg" width="100%" style="background-image: url(your_image.jpg)"> Your text here </td>
should work in all major mailer (web and offline); except, as far as i know, Outlook 2007 and Outlook 2010.
Be aware that i put both the standard definition of background image AND the inline CSS one.
what about this alternative?
<div style="background-image:url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Black_background-5.jpg');background-size:cover;width:400px; height: 350px;display: inline-block;"><p style="color:blue;">SOME TEXT FOR CONTENT..</p></div>