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?

My HTML:

<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>

example: https://jsfiddle.net/2zehs9f5/

Answers


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>

Need Your Help

How to auto-deploy web-app

php deployment automation

I'm trying to make sense on the best way to do automatize a series of things in a row in order to deploy a web-app and haven't yet came up with a suitable solution. I would like to:

Application Dashboard View Logic

ruby-on-rails ruby dashboard

In my application I would like to provide a dashboard like screen when they login to get an overview of what is happening. I have about 4 models I would need to collect data from and sort them into...