1

I want to place text on top of an image that I placed in a table cell.

  • I tried to use the z-index but the text keeps appearing under the image.

  • I created a class called p1 that positioned the image relative(not sure how I should handle this inside of a table) and the z-index -1.

  • I then added the class id in the table cell tag.

What I have so far:

.font1 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: small;
  text-align: left;
}
.hangingindent {
  padding-left: 100px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
}
.hangingindent2 {
  padding-left: 75px;
}
.p1 {
  position: relative;
  z-index: -1;
}
.backbox {
  z-index: -1;
  position: relative;
  left: 0;
  right: 0;
  botton: 0;
}
.text {
  z-index 100;
  color: #0000000;
  font-size: 14px;
  position: absolute;
  top: 100px;
  right: 200px;
  overflow: hidden;
}
<table width="1013" border="0" align="center" cellpadding="0">
  <tr>
    <td colspan="5">
      <img src="images/images2/header.gif" width="1013" height="642" />
    </td>
  </tr>
  <tr>
    <td colspan="5">
      <img src="images/images2/menu-grid.gif" width="1013" height="232" />
    </td>
  </tr>
  <tr>
    <td width="55">&nbsp;</td>
    <td width="231">
      <img src="images/images2/solutions.jpg" width="204" height="46" />
    </td>
    <td width="233">
      <img src="images/images2/capabilities.jpg" width="204" height="46" />
    </td>
    <td width="232">
      <img src="images/images2/art services.jpg" width="204" height="46" />
    </td>
    <td width="254">
      <img src="images/images2/contact us.jpg" width="204" height="46" />
    </td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5" class="hangingindent2">
      <img src="images/images2/WELCOME.gif" width="500" height="100" />
    </td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5" class="hangingindent">
      <p>Since 1968, Packaging Products Corporation (PPC) has been a leader in the flexographic printing and converting industry.
        <br />Our focus on emerging technologies in film substrates, ink systems, and controlled atmosphere packaging, enables us to
        <br />provide the highest quality products at the most competitive prices.</p>
    </td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">
      <div class="backbox">
        <img src="images/images2/bottom2.gif" width="1013" height="810" />
        <div class="text">This is a test to see where the text will land</div>
    </td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="5">&nbsp;</td>
  </tr>
</table>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
Richard Spearman
  • 11
  • 2

2 Answers2

2

As I got from your question is you want to put text over an image. So to do it, there is no need to use z-index. you can do it by setting absolute position of p tag and make td tag as position relative. demo for it is you can use the link

<table>
    <tr>
        <td>
            <p>Hello</p>
            <img src="http://www.freakypic.in/wp-content/uploads/2014/08/flower-images.jpg" />
        </td>
    </tr>
</table>

CSS:

img {
    width:200px;
}
td {
    border:2px solid red;
    position:relative;
}
p {
    position:absolute;
    color:yellow;
    font-size:30px;
    top:0px;
    left:70px;
}
Mayuri Patil
  • 21
  • 2
0

You can change the markup little bit.!

Z-index will work with position set to other than static (which is default).

  1. Here, you can remove the <img> tag & display the image as background image.
  2. Other solution wrap the text in <p> or <div> & make it position: absolute & immediate parent <td> as position:relative (This is mentioned earlier already)

little code explanation

exp1 -- background-image

td {
    background-image: url("");
    background-position: left top fixed;
}

exp1 - HTML markup

<td>Data to be there on top of the image</td>

Please check this link! - JSFIDDLE

YaswanthJg
  • 130
  • 11