Thanks for your solution.

I want text to be overlayed and I’ve wrapped the whole A tag around the divs…
I’ve got what I want although now there are lines appearing under the text in firefox and safari..

Have I done a dodgy trick??
What do you reckon..?

http://suehuxleytabitha.businesscatalyst.com
(The purple box that says Sue Huxley Sandang School)

Maybe I’m doing something wrong….

Thank you for pointing me in the right direction :) I didn’t like the dotted outline that ran off of the page because of the indent. So here is my revised version of what your trick.

Perhaps there is some downfall to my method, but I could not find one. If someone finds any issues with this, please reply to my comment so I will be updated. Thank you.

Here’s what I did…

I implemented this as a class in the link:

http://somesite.com

Place the above where you wish insert the logo or even any image, really.

I used style=”color:transparent;” (Otherwise the link will show.)

.example {
background: url(http://somesite.com/logopath/logo.jpg)no-repeat;
text-align: center;
display: block;
width: px;
height: px;
outline: none;
}

I used text-align: center; (in case you would prefer to show the link over the image. This is useful for me as I do use it that way sometimes. I just remove the inline color:transparent; in that case.)

width and height needs to match the exact dimensions (in px) of the image you are using.

outline: none; is to remove the dotted line that surrounds links when you click on them.

Further note:

You do not need to specify any text HERE for this to work. In this case, you won’t need to use color:transparent; in the

I hope this helps someone.

Perhaps there is some downfall to my method, but I could not find one. If someone finds any issues with this, please reply to my comment so I will be updated. Thank you.

Here’s what I did…

I implemented this as a class in the link:

http://somesite.com

Place the above where you wish insert the logo or even any image, really.

I used style=”color:transparent;” (Otherwise the link will show.)

.example {
background: url(http://somesite.com/logopath/logo.jpg)no-repeat;
text-align: center;
display: block;
width: px;
height: px;
outline: none;
}

I used text-align: center; (in case you would prefer to show the link over the image. This is useful for me as I do use it that way sometimes. I just remove the inline color:transparent; in that case.)

width and height needs to match the exact dimensions (in px) of the image you are using.

outline: none; is to remove the dotted line that surrounds links when you click on them.

Further note:

You do not need to specify any text HERE for this to work. In this case, you won’t need to use color:transparent; in the

I hope this helps someone.