Home

Tutorials

Articles (6)
HTML/CSS (15)
Javascript (3)
PHP (3)
Paint Shop Pro 7 (7)
Flash CS3 (9)

Design

Avatars (166)
Layouts (8)
phpBB3 Skins (4)
Buttons (20)
Fonts
Emoticons
Adopt

Quizzes

Classical Elements
Your Baby's Looks
Clothes Color

Interactive

Button Rotation
Hosting
Livejournal

HTML & CSS Tutorial: Image Over Text [using DIVs]

This uses the div positioning concept, so if you don't know it, go back and read my div positioning tutorial! 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"></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.

Forum

Latest Topics...
- Continuing Story OOC
- Hai Hai Everyone :3
- WE SHALL TALK ABOUT MUFFINS!
- Harle is a bastard
- messages of love

Site

Submissions
Terms of Use
Credits
Links & More

Site of the Month

Affiliates

None

Neskaya.Net is © Strawbee 2008. All rights reserved.
Best viewed in 1024 x 768 resolution or higher.