Text over image

[Egaladeist]

Hello,

Is it possible to place text over an image? and how?

I know how to insert text and I know how to do the <h1> to insert text...but how do you get it over the image? Where do you insert it in the template?

Thanks,

Eg ;)

[Fang]

<div style="position:relative;">
<img alt="apple" src="apple.jpg" height="50" width="125">
<p style="position:absolute;top:0;">text here</p>
</div>
<p>OR</p>
<p style="background:#9cf url(apple.jpg) no-repeat;width:125px;height:50px; ">text here</p>

[Egaladeist]

Hi Fang,

Thank-you very much!!! I'll try that out right away!!!

peace,

Eg ;)

[Egaladeist]

Hi again Fang,

Must be doing something wrong...I've tried to place it in the template in various locations...but the best I could do was create a small image on top of the regular image with the text overlapping both the smaller image and some white space.

Basically, all I accomplished was lowering the first image and placing a much smaller version on top of it with white space filling in the rest.

I tried between the body tags, and after the css, and under the image, and over the image, directly below the header, and no luck...it either showed as described or didn't show at all...can you explain what I'm doing wrong?

Thanks,

Eg ;)

EDIT: Well...with a few adjustments I got it to work...

<div style="position:relative;">
<img alt="apple" src="add-image-here" width="700" height="244">
<p style="position:absolute;top:0;margin: 40px;font-size : 30px;font-weight: bold;">add-name-here</p>
</div>

but I still can't center it.

[Kevey]

Try this...works for me although not as fancy as other methods. Hopefully it will help you out.

http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480021

[ray326]

<div style="background:url(add-image-here); width:700px; height=244px;">
<p style="font-size : 30px;font-weight: bold;text-align:center;">add-name-here</p>
</div>

[Egaladeist]

Thanks Kevey, ray326,

I'll try out your suggestions...appreciate the help!

peace,

Eg ;)

[ray326]

...height=244px;">Error. Should be ...height:244px;"