Hi this is a direct post from a m8 of mine. I can't think how to do this purely in css.

This is a bit of a style.css sheet for my blog, and it displays the image at the top of the page.
How do I add a bit to display text when I hover over the pic with the mouse?

Cheers.


#header {
background-image:url(images/header_back.gif);
background-repeat:no-repeat;
background-position: top center;
width:517px;
height:114px;
margin-left:7px;
}

anyone help,

cheers,


dave

You cannot apply an "alt" text to a background image.

The link below may be helpful in trying to give the appearance of alternative text.

http://evan.nixsys.bz/note/

that's exactly what i thought and have asked him to show me what his layout is and if possible i'll change it in html. I'll look at that link shortly

thank you ,

cheers

If you'd want a text-hover on that background image, why not put a title on the div it's in ? Like

HTML

<div id="header" title="put text-hover here">whatever</div>

CSS

#header {
background-image:url(images/header_back.gif);
background-repeat:no-repeat;
background-position: top center;
width:517px;
height:114px;
margin-left:7px;
}

You can always position a transparent gif over all or part of your header background image and give that a title. Internet Explorer wrongly displays alternative text as a tooltip since you are only meant to see this text if the image fails to load... so for tooltips that will show in all browsers use 'title'.