Hi,
I came across this site from Techcrunch:
http://www.room77.com/index.html
The main text in the middle “Personal hotel room recommendations” appears to be in a div which shows it as a background text. Similiar to the background image.
Does anyone know how to do this?
They are using what’s called a “sprite” image—that is, an image with a few graphics on it. At the top of that graphic, the title is written in white letters:
http://www.room77.com/images/web/sprites/home_search.png
The H1 has set dimensions, and the image is applied to it as a background, but because of the H1’s dimensions, only the top part of the image (the white text) actually shows. The real text is given a large, negative left margin to move it off screen.
Thanks,
So why would they have some text in HTML and some text as an image?
If they have a large image doesn’t take longer to download? I thought they would just use a small image and repeat it many times as a background?
Reliable web fonts tend not to look as nice as fonts you can use in Photoshop, so for things like this there’s a temptation to use graphics. There are various reasons why you should keep the text in the HTML all the same. It’s important for search engines, and also, other users such as those on screen readers or those with CSS disabled will still get the text. They could also have set this up so that users with images disabled would still see the text, but in this case, they didn’t bother.
If they have a large image doesn’t take longer to download? I thought they would just use a small image and repeat it many times as a background?
Sprites are particularly handy when you are doing rollovers, as the hover state appears instantly because it has already downloaded. (If the hover image were a separate graphic, it would be slower to appear.) In this case, there was no big reason to combine the two images, but even as separate images, they still would need to download on page load, so it makes sense to combine them and save a call to the server, I suppose.
But embedding text in image is very harmful. Because search Engines can’t read this text and if some one search for your title then search engine can not find it on your site because it is embedded in image.
That’s not what is happening in the example cited by the OP. The trick is to have the text in the HTML so that search engines see it, but hide it from sighted users by replacing the text with an image. This is known as “image replacement”, and there are various ways of doing it—none entirely perfect, though.
This is a good example (or [URL=“http://www.pmob.co.uk/temp/headerreplacement3.htm”]here, with a link included).