Everyone is telling you this isn’t possible, perhaps because of their attention to precise semantics. No, you can’t literally make a background image clickable, since a background image isn’t an entity that can possess a behavioral property the way CSS is organized. But you can certainly apply a background image to a link, and without needing any transparent image overlays:
#backgroundlink
{
display: block;
height: 100px; (height of the background image)
width: 200px; (width of the background image)
background-image: url(logo.jpg);
}


The anchor tag is naturally inline so you need to make it a block in order to hold a shape without inner content. The height & width are those of the image.
To make this work in a non-CSS user agent as well, you might want to add something like this:
#bglink span
{
display: none;
}


Click my logo

If CSS isn’t enabled, the text link replace the image link.
Click here to see a good explanation of similar technics

Interactive Color Picker

If you need an interactive color picker, just check here

Written on August 17th, 2008 , css Tags: , ,

OMOTECH Tips & Tricks is proudly powered by WordPress and the Theme Adventure by Eric Schwarz
Entries (RSS) and Comments (RSS).

OMOTECH Tips & Tricks

this blog offers tutorials based on various it-subjects