How do I partially layer text over an image?

I’m just wondering how I can layer the left part of a paragraph of text over the image w/o using tables and divs, such as the webpage below:

w ww.susur.com/madelines/index.html
(there’s a space between the 2nd and 3rd w, otherwise they won’t let me post)

Here they probably used tables, but I don’t want to use tables or divs. Please help.

Hi,
To do that with a div you would just set the image as a background image with no-repeat. Then fill the remaining space with a BG color.

Then just set your p tag at about half the width and float it right. They have a fixed height set so text would need to be kept to a minimum.

Using that image you could do something like this.

You will have to save that image to your desktop temporarily to see this work.
Then delete the image when your done as it is copyright material. :wink:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>

<style type="text/css">
body {
    background:#161616;
    font-size:100&#37;;
}
#wrapper {
    width:920px;
    height:505px;/*image height*/
    margin:30px auto;
    overflow:hidden;/*contain inner floats*/
    background:#000 url(bg_main_interior4.jpg) no-repeat 0 0;
    border:1px solid red;
}
p {
    float:right;
    clear:right;
    width:50%;
    color:#FFF;
}
</style>

</head>
<body>

<div id="wrapper">
<p>Lorem ipsum dolor sit amet consectetuer Nulla cursus pellentesque sem mauris. Et ut Suspendisse volutpat nunc pretium Maecenas Vestibulum Quisque justo nibh. Elit congue justo rutrum pellentesque penatibus pretium sed vel et facilisis. Adipiscing magna lacinia vestibulum dolor platea Nullam volutpat venenatis mollis congue. Consequat eget eget pretium interdum dolor faucibus habitasse tempus in orci. Pellentesque et vel Vestibulum eu amet consequat magnis interdum consequat semper. Facilisis orci.</p>
<p>Neque nibh elit vel quis orci lacinia sit Aliquam et interdum. Nec Sed neque pellentesque eget volutpat accumsan quis sed nunc tristique. Mauris diam habitasse eu nascetur adipiscing nibh mattis Ut Vestibulum Duis. Donec a venenatis a a nulla cursus urna magna tristique vel. Tellus consequat elit semper ac turpis nibh felis vitae condimentum Mauris. Risus eleifend leo quis sed Pellentesque ut.</p>
</div>

</body>
</html>

@jbiggis

Don’t ask the same question in two threads at the same time!

Wow, thanks a lot Rayzur. :slight_smile: And yeah, sorry about posting it on two threads.