Write text over an image

Report · Feb 28, 2010

Hi.

I'm sorry if this is the wrong forum to ask this question.

I'm doing a homepage, and I've saved my templates, and will now write some text.
My question is; How do I write text - and put other pictures, over a picture. (this picture is my background)

I know it's easier if you make a table - or i figured that out now. BUT..
as I said is my template already done and put into other pages.
- And my template only consists pictures i've cuttet out from a design in photoshop.

I know it's a mess, and I should've add'ed the pictures as background from start
but isn't it too late now?
you can't delete the templates on the pages - but can you update them?

hope you understand
- Sabine

Report · Mar 02, 2010

You can do it with CSS.

Here is a simple example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

HTML, BODY {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

#the-outside {
  border: solid 1px black;
  background-color: gray;
  width: 500px;
  height: 400px;
}

#image-holder {
  background-image: url(your-image.png);
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 400px;
}

#text-holder {
  z-index: 2;
  position: relative;
  top: 0px;
  left: 0px;
}

</style>
</head>
<body>
<div id="the-outside">
  <div id="image-holder"><!-- image goes here, "behind" the text --></div>
  <div id="text-holder">
    <p>
      Here is some text - and some more here too. 
      Wheelbarrels are wonderful, aren't they?
    </p>
    <p>
      Here is some text - and some more here too. 
      Wheelbarrels are wonderful, aren't they?
    </p>
    <p>
      Here is some text - and some more here too. 
      Wheelbarrels are wonderful, aren't they?
    </p>
    <p>
      Here is some text - and some more here too. 
      Wheelbarrels are wonderful, aren't they?
    </p>
  </div><!-- end text-holder -->
</div><!-- end the-outside -->
</body>
</html>