# Layering Text over images?



## DaveSS (Jun 18, 2002)

Hi folks,

My learning curve with DW continues.

Can anyone tell me how to place text over an image that is not apart of the back ground?

Here's an example LINK

I very much like the way the image fades(Photoshop) and then the text starts over the bottom of the image. Any idea how this is accomplished.

Sorry I don't know html, so I struggle with code answers at the moment


----------



## tomdkat (May 6, 2006)

I'm not seeing the text you're talking about. Can you post the words of the text that is placed where you describe?

Peace...


----------



## DaveSS (Jun 18, 2002)

"Eyes of the West Indies" on the home page or a clearer example would be on this page
Link 

"Catfish Heaven: Winter on the Bayou" being the text along with some more text and even a photo

Most of the links on the top of the page take you to a photo with text over it at the bottom.

I looked at the source. But am not good in that area, so couldn't see how it's done. Super complicated or easy


----------



## tomdkat (May 6, 2006)

Gotcha. That's quite easy.  Taking the great plains page as an example, the image is simply the background image of an element and the text is contained within the element.

Looking at the source of that page, we find this:

```
<tr>
              <td valign="top" [b]class="backer"[/b]><table width="806" border="0" cellspacing="15">
                <tr>
                  <th height="244" colspan="2" scope="col"><br>
                  <br>

                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>

                  <br>
                  <br>
                  <br>
                  <br></th>
                </tr>
                <tr>
                  <th scope="col"><a href="bayou.htm"><img src="../files/spoon.jpg" alt="Image" width="140" height="140" class="images_home" /></a></th>
                  <th valign="top" scope="col"><div align="left"><font face="Arial, Helvetica, sans-serif"><a href="bayou.htm" class="bar_title2">[b]Catfish Heaven: Winter on the Bayou[/b]</a></font><br />

                          <span class="region_address">GREAT PLAINS | February </span><br />
                          <span class="main_home12"><a href="http://www.notesfromtheroad.com/desertsouthwest/colorado_plateau.htm" class="bar_sandstone5"></a>&quot;...<span class="main_home12">I ask Jon if he&rsquo;s ever eaten nutria. He says all the time, it&rsquo;s delicious. He explains that Cajun chef Paul Prudhomme almost lost his reputation by adding Nutria to his menu, but that in reality its great meat, and people shouldn't be afraid of it just because its a giant water rat. I say, &ldquo;Even if this is nutria, I&rsquo;ll eat it.&rdquo; I thought that would be the best way to fool their cruel joke. </span>&quot;</span><br />
                        <a href="bayou.htm" class="barread">Read It</a></div></th>
                </tr>

                <tr>
```
That means the "Catfish Heaven" text is in a table that is nested in another table's cell. The table cell with the CSS class "backer" (in bold above) has the background image specified:

```
.backer {
	background-color: #000000;
	[b]background-image: url(images/great_02a.jpg);[/b]
	background-repeat: no-repeat;
	background-position: top;
}
```
The CSS in bold above specifies the background image to be used.

If you want to try this yourself, here's an easy way to do it:

Create a new web page in your web design tool of choice
Insert a table of any dimensions on the page
Assign a table cell or row or the entire table a background image
Enter some text in any cell in the table and voila, it's "layered" on top of the image. 

Here is a simple test page you can play with:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Table cell background</title>
  <style type="text/css">
.cell-background {
  background-image: url([b]firefox0104nd3.png[/b]);
  background-position: center top;
}

  </style>
</head>
<body>
<table style="width: 50%; height: 500px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>

      <td class="cell-background" style="width: 50%; text-align: center; background-repeat: no-repeat; background-position: center top; color: red;">
      <h2>This has a background</h2>
      </td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td style="text-align: center;">

      <h2>This does NOT have a background</h2>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
```
In the above HTML, you simply change the file name in bold to the image you want as the background image and voila! Attached is a screenshot of the above HTML in action. 

Peace...


----------



## DaveSS (Jun 18, 2002)

Big thanks for the help. There, it makes perfect sense now. I just spent the last 10 hours going over it. So Hopefully it stays in my head. I have not touch CSS yet. I am just using frames, so hopefully the effect will be the same. 

Thanks again.

Dave


----------

