Graphics: Text over image

started by Ibelta on Nov 4, 2004 — RSS Feed

Ibelta Ibelta
Posts: 5

How can I have a text box, which its content will appear on top of an image???
Tried layer but it does not work
Any other idea??? : :

Baxter Baxter
Posts: 157

Layer is some tragic leftover from Netscape 4. You need to use the css background property.

However, if you're talking a form textarea, be forewarned that styling form elements is dicey.

Joe Gillespie Joe Gillespie
Posts: 528

'Layer' is the term used in GoLive and other editors for DIV, and I wish they wouldn't.

The image doesn't have to be in the background of a div. This article...

http://www.wpdfd.com/editorial/wpd0904news.htm#feature

shows how to put text over images using absolute positioning inside a relatively positioned div.

Baxter Baxter
Posts: 157

Sure, there's more than one way to skin a cat... I've been known to use negative margins, relative positioning tricks, z-index and any number of other methods to achieve the effect. Most times using the simple background property is easiest and most effective.

Most times.

Ibelta Ibelta
Posts: 5

Baxter
Can you give an example?

Ibelta Ibelta
Posts: 5

I need to see the text as part of the image and not like a far background.
I wonder if someone can throw an example here...


Thx

Baxter Baxter
Posts: 157

OK, say all your text is in a div called "beer"
Your html would  look something like
<div id="beer">
<p>text</p>
<p>more text</p>

and in your stylesheet, you'd have something like
#div {background: {url(whatever.jpg) no-repeat}

For best results, you'd also set the height and width of "beer" in the stylesheet to the same dimensions of your image, and you'd want to set some padding and other characteristics on the text inside the div.

That's the thumbnail version.

Ibelta Ibelta
Posts: 5

I am sorry, I didnt explain well...
I have a text box that user enters data and the content should appear on top of a picture....
Any example?

Joe Gillespie Joe Gillespie
Posts: 528

You could put a text box on top of an image by putting it in a div on top of another div but how a text box looks is very browser dependant. If you mean a transparent text box, you are out of luck.

Ibelta Ibelta
Posts: 5

I tried to modify this one to have text box instead of links but with no success..

http://www.dyn-web.com/dhtml/write-lyrs/info-on-img.html#

Baxter Baxter
Posts: 157

You can do it exactly how I explained, BUT you're not likely to get it to work with the table-based, rounded corrner box you're using (unless the image is static),

If the image is static, save yourself a lot of aggravation, and just put it together in the rounded corrner box, slice it up, and put it in there.

IF you want it to be dynamic, in your javascript, where it's writing the text string, you'll also have to set the background display property.  I forget the exact syntax, and I haven't had my coffee yet, but look at JS style switchers and you should get some clues.

Maskodok Eko Maskodok Eko
Posts: 171

Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

Kokokmas Kokokma Kokokmas Kokokma
Posts: 104




You must login to reply