Text overlays over image using relative positioning

html css image css-position overlay
Water picture Water · Sep 17, 2011 · Viewed 44.1k times · Source

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

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>.

Answer

Blender picture Blender · Sep 17, 2011

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>

Related questions

How to put an image behind text in CSS?

I want an image to be displayed behind some text in an <h1> tag. But when I add the image it replaces the text and pushes the text below it. Screenshots : Before and After CSS body { background-color: #1a1…

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
Responsive image align center bootstrap 3

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the …

Read More