Jump to content

Text in CSS Background?


justlukeyou

Recommended Posts

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 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

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 ::)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.