Writing over top of background image...

I have the following html code

<td background="images/test.jpg" width="567" height="22"></td>

Now, the background image has an arrow about 22 pixels in from the left. I want the text to start after the arrow. I tired this

<td background="images/welcome.jpg" width="567" height="22">Welcome to blah blah blah</td>

and obviously it defaults to the left. I can center it, but then it does not sit right in relation to the arrow. I can use the &nbsp; repetatively to make it align. If I indent, it puts a little dot.

Any ideas?

 

try :
<td background="images/welcome.jpg" width="567" height="22"><h1>Welcome to blah blah blah</h1></td>

and in css :
h1 {
margin-left: 25px;
}

 

Or you can use a clear, 1px gif, set it's size to be 22px wide and aligned left (you may need to do some tweaking) and it should do the trick. The css won't render the same on everyone's screen. I love css, don't ge me wrong, it's just not foolproof.

 

It's wierd, I thought there would be an 'indent' option or something. The css way does not work because of a few browsers that I have checked. The transparent gif is the same as the &nbsp; no? I know I have to put about 7 or 8, but the gif is another image to load. I guess there is alt text there too. So much work for such a simple thing.

 

Try this:

<td background="images/welcome.jpg" width="567" height="22" style="padding-left:26px">Welcome to blah blah blah</td>

Where it says 26px put whatever number you want.

 

I would have done it by not putting the arrow on the background and loading it as a gif making it easyer to postion.

 

Awesome Kalina, that is exactly what I was looking for. Thanks again.

 

Great, you're welcome NewComputer!

 

Hi,I tried the option it does help me with writing text on the image but at the same time it displays the image more than once even if i give only one .I want the image to be displayed only once.Please let me know if you have any suggestions.Thanks

 

Try this:

<td background="images/welcome.jpg" width="567" height="22" style="padding-left:26px; background-repeat:no-repeat;">Welcome to blah blah blah</td>

Code (markup):