css div image information for search engines

I have a website and in the main page a I have a div with an image where with a very nice design says "contact us by calling 1 800 blabla..". so I was thinking if the only place where the phone number of my company, is on a div with an image background, how the search engines are going to recognize or find my company's number,

so my question is basically how can I add information to this div which is :

<div id="phone"></div>

and any other div that i need to put information for robots and stuff

It's pretty easy using an image replacement technique.

<div id="phone"><span>11-1111-1111</span></div>

And the CSS. (change your phone div to be whatever you need it to be, but you'll need to define a width and overflow: hidden to hide the text.

#phone
{
    position: relative;
    width: 200px;
    height: 100px;
    overflow: hidden;
}

#phone span
{
    position: absolute;
    left: -999em;
}

Alternatively, without using extra markup (I read somewhere that google disapproved of using text-indent in this way which is why I didn't use this first, but I can't find the source for that).

<div id="phone">11-1111-1111</div>

And the CSS.

#phone
{
    width: 200px;
    height: 100px;
    overflow: hidden;
    text-indent: -999em;
}

Additionally: http://css-tricks.com/css-image-replacement/ looks like a fairly decent resource.

You might want to look into hCard microformat specification and create an HTML code something like this:

<div class="call-us vcard">
    <span class="tel">
        <span class="type">business</span>
        <span class="value">+1.800.blabla</span>
    </span>
</div>

Where the call-us classname formats the div by setting its dimensions, visually hiding the span.tel tag and adding the image as a background. Search engines would recognize that this is a contact card (note the vcard classname), and they would correctly parse the phone number.

You have to use this approach

#ContactInformation {/* your image and restof padding */}
#ContactInformation h2 { display: none; visibility: hidden; }

<div id="ContactInformation">
    <h2>Phone:</h2>
    <label>1 800 blah blah</label>
</div>

Actually Search Engines See and check h2 tag and it's value but your user wont see the h2 text.