Alt Tag Limitations When it Comes to Displaying an Image That Reads as Text

[dgswilson]

There is a way to put actual parsable text within an image. It looks like it's "on" the image or part of the image, but what it does is actually uses the image as sort of a background, so the there is actual text present. I know how to do this with HTML, but not with CSS.

Good one Clint - That's gotta be the best way. I haven't seen webpages but if it's like a book you could use div1 { float:left; margin:1em; padding:1em; background-image: url('xxxx://xxx.domain.com/images/pic4div1.gif'); background-repeat: no-repeat; background-color: #ffffff; }


Header ...
Content ....

Whatever fits in row: div1, div2, div3

<br clear="all" />

Next row: div4, div5 etc.

/Content

[Clint1]

This is how I do it in HTML:

<table width="100" height="73" border="0" cellpadding=0 cellspacing=0 background="/images/button-name.gif"><tr><td align=center><a href="http://" style="text-decoration: none"><font face="arial" size="1" color="#whatever"><b>Text here</b></font></a></td></tr></table>

[dgswilson]

Be nice to see exactly what the (posters) page is supposed to look like

Sample image position - http://www.dgswilson.com/tablesForStories.html

[Clint1]

Be nice to see exactly what the (posters) page is supposed to look like

Sample image position - http://www.dgswilson.com/tablesForStories.html

That image doesn't have any text on it.

[dgswilson]

It's not a good (background) image for writing on top of. That's why I was wanting to see the page in question. I asked for a link to page in question - "pm'ed" the original posters profile.

[Clint1]

It's not a good (background) image for writing on top of. That's why I was wanting to see the page in question. I asked for a link to page in question - "pm'ed" the original posters profile.

Yeah, we can only assume that the image is simple like a nav button for example. (Which is what I use the code for). Obviously if it's a "busy" image it wouldn't make sense to put text on top of that, nor would you need the code because you'd put the text below the image (such as you did).

[jwkarpo]

Thanks so much for all the great advice! I really appreciate it. Placing the text over the image sounds like my best bet but I'm also going to look into that separate link for the "text version".

I didn't have the minimum amount of posts so I didn't include a link, but in case anyone is curious to see this question in context you can just do a google search for "efeats" and it'll be the first page that pops up. Thanks again!

[Clint1]

If you're talking about the vertical images at the left side, http://www.efeats.com/ I don't really see a need to have actual text overlayed on them (nor text below them), since the text is so generic, not generally searched-for, and non sequitur for SEO. But you should use alt and title attributes on them.

On another note, you appear to be using a blue background somewhere. You appear to be using the blue background you can see at the top and bottom, for the entire page. I can see darker blue "flash" before the page loads. What's the purpose of that since the background is white? That slows down the loading of a webpage. This doesn't appear to be it (/img/bg.gif) so maybe it's just a color and not an image.? If so then just make it white so there won't be any flashing.

[dgswilson]

Also, if you set body to:

background: white; ( #fff )
width: 1152px;
height: 5100px;

for those ( efeat/welcometohollywood/welcometohollywood.html ) pages you'll make it hard for "most" people to see your pages.

I, as a general rule, don't declare a body width and height. Then set the next container div to a relative position and a width at some-% and let the monitors and browsers render it accordingly. That's a real generalization. Point being to get the page inside the viewport. images can be resized before uploading and height/width declared inline.

This is probably the blue (or black) - "background-image: url(back.jpg);" - that's flashing. But I'm seeing it as it should be, as a background. (Linux/Chrome)

[Clarrie]

I'm also going to look into that separate link for the "text version".

Think that would be your best option - looking at your site, you're obviously trying to keep the visual integrity of the image and the font style in the stories, and putting text over the top probably won't suit very well.

I have a simple script that will do it for you - if you PM me I'll send it to you.