Text in CSS Background?

[justlukeyou]

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?

[cssfreakie]

They used a text-indent of -5000px for it. So the background is just an image, but the text over it displayed outside the view

Use firebug it would have immidiatly told you:

div.home_search_container h1 {
    background-position: left top;
    height: 40px;
    margin: 0 auto;
    text-indent: -5000px;  
    width: 670px;
}

 

This is probably done for SEO reasons

[cssfreakie]

The image is a sprite: http://www.room77.com/images/web/sprites/home_search.png

in case you didn't found it, nifty thing is though the font is collored whitem so you wont see it directly if you do show image