12

I want to position a text overlaying an image. Below is my currently used code:

<td width="10%"> <img src="tempballoon.png" alt="balloon" style="z-index: -1" /> <div style="position:relative;left:30px;top:-75px;font-size: 32px;display: none"> Test </div> </td>

My problem is, although the text is properly overlayed, the "space" it consumes in the <td> is still there! When I tried to replace the 'top' position in the <div> with 'margin-top', it also affects the <img> and so the <img> goes past the border of the <td>.

Improve this question

2 Answers 2

Reset to default
30

You want position: absolute and the container to be relative:

<td width="10%" style="position: relative;"> <img src="tempballoon.png" alt="balloon" style="z-index: -1"/> <div style="position:absolute;left:0px;top:0px;font-size: 32px;display: none"> Test </div> </td>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

recommended creating a css stylesheet for more then one style property.
This answer is wrong, table elements cannot be positioned. Some browsers like Chrome apply it however it is not correct
2

Why not set a div inside the TD set the image to the background of the div and the drop your text in the div?

<td width="10%"> <div style="background: transparent url("tempballoon.png") no-repeat left top; font-size: 32px;width: 100%; height: height:[height of image]"> Test </div> </td>
Improve this answer

2 Comments

This answer is not so versatile if the image being used is being upscaled.
@EnocNRoll no for a responsive website this is not the best choice. However using a table in a responsive design would also not be the most versatile of choices so I figured I would give an option as both work for the OP's question. Also of note the style z-index is superfluous because z-index only works on positioned elements.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.