PDA

Click to See Complete Forum and Search --> : placing text inside images

mikers83
05-20-2006, 03:54 PM
I was wondering if there is any html code for placing text on an image, (as opposed to just outside). This is for a blog on Xanga- I am trying to make my own header that has a background image with text that I can change periodically. I already tried <body background=...> and it didn't work. I keep thinking there has to be a way to do this with html. If there isn't, maybe someone who's familiar with Xanga can tell me another way to get what I'm trying for. :confused:
WebJoel
05-20-2006, 03:57 PM
I was wondering if there is any html code for placing text on an image, (as opposed to just outside). This is for a blog on Xanga- I am trying to make my own header that has a background image with text that I can change periodically. I already tried <body background=...> and it didn't work. I keep thinking there has to be a way to do this with html. If there isn't, maybe someone who's familiar with Xanga can tell me another way to get what I'm trying for. :confused:

You could possible position a absolute-positioned DIV over-top of the header, and insert text therein(?). If one has a z-index:+1 over the other, -it might work. I might try this offline and see...
mikers83
05-20-2006, 04:01 PM
I should mention that I only have rather elementary knowledge of html, :rolleyes: so if you could explain that a little more thoroughly or give an example here, that would be great. Thanks
WebJoel
05-20-2006, 04:03 PM
I should mention that I only have rather elementary knowledge of html, :rolleyes: so if you could explain that a little more thoroughly or give an example here, that would be great. Thanks

<body>
<img src="image1.gif" style="position:absolute; left:5px; top:5px; background-color:blue; width:800px; height:125px; border:1px dotted green;" />

<div style="position:absolute; left:30px; top:5px; background-color:white; width:700px; height:70px; border:2px solid black; margin:10px; padding:15px;">Testing this text to see if it is on top of the image DIV</div>

</body>

Okay, -here is a "image" (used as a Header, but background-color:blue to show that it is there), with a DIV positioned over-top of it. The blue shines through, so THAT div has a background-color:white.
From this I think I can predict that if the image were really present, the text in the DIV would be over-top of the image-header. Just remove the border data and the background-color:white from the positioned DIV. You will want the Header image to be slightly opaque probably, and have the text color in the positioned DIV be dark/bright enough to be seen. For that, add a "color:#xxx" in the STYLE of that DIV.

If this still doesn't make any sense or you don't quite get it, let me know and I'll do an image and get the text working satisfactorily.
NogDog
05-20-2006, 04:19 PM
You can use a CSS background image: define a DIV element to be the height and width of the image, set the image as the background, then add your text as desired (using a P tag with margins/paddings to position the text as desired over the image).
WebJoel
05-20-2006, 04:49 PM
You can use a CSS background image: define a DIV element to be the height and width of the image, set the image as the background, then add your text as desired (using a P tag with margins/paddings to position the text as desired over the image).
Well yeah, -if you wanted to do it the easy way... ;) hahaaa (Your suggestion is the better option). Thanks!