This isn't really an xHTML or HTML tutorial, but I thought this was the best place to put it. xD This uses the div positioning concept. Placing an image over your text - particularly a transparent image - can be a useful design tool. Here is an example:
This is a layout I made for my personal site. Note how at the bottom, the bunny's ears are over my text. And when I scroll, the text scrolls but the image doesn't. It's a really nifty effect, and it's quite simple.
All you have to do is position your transparent image:
to be at the spot that you want it to be. (Note: this transparency is really badly done and only part of the image is transparent, but it gets the job done)
Your coding will look like this.
<div style="position:absolute; left:153px; top: 212px;"><img src="image.gif" width="109" height="265" border="0" style="z-index: 100" alt="" /></div>
Just adjust left, and top, and image.gif accordingly! z-index lets you determine what is on top when layers overlap. The higher the z-index, the more on top of everything else it will be.
|
]