Discussion on:

Superimpose text over an image by using CSS-styled text

I really like this tactic and have used it a few times with little problem.

readers may consider changing

div#test {
background-image: url(/images/backgroundimage.JPG);
background-repeat: no-repeat;
height: 500px;
width: 380px;
}

to

#test{
background: url(/images/backgroundimage.jpg) no-repeat;
height: 500px;
width: 380px;
}

as it's much better to combine those two into the same declaration. Also, the div (in div#test) isn't really required as the ID test should only ever be in one place.

It is far easier to use a CSS styled text with a layer rather than a .

Positioning can be done manually in a Visual editor or text editor quickly. The text characteristics can be CSS styled without worry.

The only downside is that the IMAGE should be anchored in a to assure that its position does not change if the viewers display screen is larger (or smaller if PDA ?).

ValdezLadd
@netscape.net

This technique would seem to add one small
plus to a search engine's ability to recognize
keywords that would otherwise be lost by
being imbedded in a graphic. hmmmmm . . .

This technique would seem to add one small
plus to a search engine's ability to recognize
keywords that would otherwise be lost by
being imbedded in a graphic. hmmmmm . . .

This might be the only disadvantage, but in IE the browser default is to omit background images when printing.

Sure I can change my own setting, but I'm considering the "audience"...

THE FOLLOWING STYLE WORKS NICELY, BUT ONLY WHEN IT IS INSIDE THE STYLE TAGS. IT DOES NOT WORK WHEN DEFINED INSIDE AN EXTERNAL STYLE SHEET. ANY IDEAS WHY?

div#test
{
background-image: url(/somesite.com/image1.png);
background-repeat: no-repeat;
float: right;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
border-top: 2px dashed #999999;
border-right: 2px none;
border-bottom: 2px dashed #999999;
border-left: 2px dashed #999999;
height: 200px;
width: 200px;
}

text superimposed over graphic

This is an awesome idea. I can't wait to try it out.

This was really helpful. I was looking for this solutions for few hours now. Thank you for giving this idea. It worked well for me. Keep posting such question/answers.