Scrolling text and watermark

HTML & CSS
1

Hi,

What I want to do is use a watermark in a wrapped div and position it on the bottom right. However, I do NOT want the text to scroll THROUGH the image. I want the text to scroll to the left of image. I have tried everything (accept what works), to accomplish this. I give up. Can any one help? Here is the CSS I am using. The test page can be found at Browser Title

Thanks for any help.

Jim

<style type=“text/css”>
<!–
body {
background-color: #000000;
}
—>
</style>

<style type=“text/css”>
<!–
#wrap {
margin: 0 auto;
width: 750px;
}
–>
</style>

<style type=“text/css”>
<!–
#stuff {
background-color: #000000;
color: #ffffff;
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 72% 95%;
}
–>
</style>

<style type=“text/css”>
<!–
#stuff {
Margin: 0;
padding: 2%;
}
—>
</style>

2

Either you give the #stuff div more width to accommodate the image or you can wrap the hole thing in another div and use separate containers for the text and watermark:

<div id=“wrapper”>
<div id=“text”></div>
<div id=“watermark”></div>
</div>

Use absolute positioning to place the watermark where you want it to be. Remember to add position relative the the wrapper div so that the watermarks position is absolute to the wrapper.

3

You could also just give some padding right to #stuff to keep the text clear.


#stuff {
    margin: 0;
    padding: 2% 250px 2% 2%;


}

If on the other hand you were expecting text to stretch full width but then wrap around the image then it can’t be done in CSS. You can wrap text around a floated (non fixed) image only but not one that sits exactly at the end of random content.