How can I position text over an image with CSS?

Question

The image is inside a <div> with a fixed width, and I want to make it so that the text always stays inside the image, a certain number of pixels from the right, no matter how the window is resized.

As of now, I can only make the text appear under the image.

<div id="contain"> <!-- width specified in style sheet -->

<div id="header">

<a href="index.php"><img src="header.png" border="0"></a>

<p style="????">Text that I want to position over the image</p>

</div>

</div>

Answer 1

use in your style (&lt;p style=???&gt;--

position:absolute;

top:[pixels];

left:[pixels];

z-index:[more than picture z-index]

Answer 2

i dont know how to do that with css,but u can add text by using some tools.

u can use photoshop,or any other professional program like Batch Watermark Creator, I use this software and it works very fine for me.

Answer 3

jab_jabbot&#039;s method was good, but if you want the whole logo to show, you will also need to specify the width and height.

But the absolute positioning, not suggested unless you do it in a format like so:

&lt;div id=&quot;contain&quot;&gt; &lt;!-- width specified in style sheet --&gt;

&lt;div id=&quot;header&quot;&gt;

&lt;a href=&quot;index.php&quot;&gt;&lt;img src=&quot;header.png&quot; border=&quot;0&quot;&gt;&lt;/a&gt;

&lt;p style=&quot;position:absolute;top:200px;&quot;&gt;Tex... that I want to position over the image&lt;/p&gt;

&lt;/div&gt;

&lt;/div&gt;

Replacing the 200px with the position. Specifying a left or right position will anchor it to one of the sides, and if the logo isn&#039;t anchored to a side (such as being centered), there will be issues from people having varied resolutions, but also to mention, if the top margin from the page top to the logo is a % rather than a set value, this method will have issues in the same manner.

And going back to the background method, I just remembered something, in your own example, say you used jab_jabbots method, you can place the &lt;a&gt; tags around the &lt;div&gt; tags, and say you want to expand past the logo, you can set the background to no-repeat, and if you want to add margins or padding, you can add them in like so:

padding-left:20px; padding-top:10px; margin:-5px;

And varying them.

I hope this helped.

Answer 4

Try this:

&lt;div id=&quot;imagetext&quot; style=&quot;background: url(&#039;header.png&#039;) repeat-x;&quot;&gt;My testing Text, 1, 2, 3 over the image. &lt;/div&gt;