Substitution for linking a background image?

HTML & CSS
1

I’m currently working on redesigning my site and am wondering what the best way is to “link a background image”. While background images are CSS and thus not linkable directly, I would like to have the same effect…

I have a couple sections on the left side of my site which are basically div tags with background images on them, and the only thing between tags will be a text link that I hope to hide when the better looking image is available.

You can see what I mean at

Test Page

The “Take a quiz?” image is a background-image, and the text based link is tossed off the screen. The reason for this is on CSS capable machines I want a nicer looking image for this stuff, but someone should be able to disable CSS and remove all (or as many) images as possible and still have a usable page. Without CSS, the text link displays, the image disappears. Using background-image lets me do this, as opposed to using the img tag within the XHTML source.

I’ve seen some people say that they make an empty href and use that, but in my use of href I want it to actually display text (granted, hidden from CSS-capable browsers) so it still works without CSS. I suppose I could put two href tags next to each other and style one differently using CSS, but then that seems a bit overly complicated.

I managed to get it to swap out the image on hover which seems to work fine, but I don’t know how to link to another site.

Does anyone have any ideas or is there a better way to accomplish what I’m trying to do? I’m trying to limit use of anything other than XHTML / CSS as much as possible (I could probably use Javascript onclick on the div tag to link to another page, but perhaps there is a better solution?)

2

Hi,
You could set your anchor as display:block; and give it 100% height to make the link area the same as your div.

.quiz_section a {
display:block;
height:100%;
background:url("take_quiz_hover.png") -999px 0; /*preload and hide hover state*/
}

Then simply remove the link text from the html or use text-indent to hide the link text off screen. You will also see that I added your hover state image and hide it off screen. That gets it preloaded so there is no delay on hover. Though a better way to do it would be to use sprites and do all your styling on the “a” since IE6 does not support div:hover.

3

Hmm I think the text indent option might work. I don’t want to completely remove it since the text is all I want to show for nonCSS viewing.

I also intend to combine the graphics and use positioning ( this is spruces, correct? ) to speed it up and reduce the number of images I have to manage, but for now I’m just trying to get a basic idea of it all. I will also try styling on the a instead for better support.

4

Yes, it’s called a Sprite Image when more than one image is seamed together to form a single image. Then the BG position will shift the image into your desired position. In your case you would be shifting the positions on :hover

Hmm I think the text indent option might work. I don’t want to completely remove it since the text is all I want to show for nonCSS viewing.

That link I gave above shows how to hook the sprite image to a <span> nested in the anchor. That span layers above the actual text so it is still there with CSS off.