HowTo make a background image clickable (link) using CSS

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:
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

Posted in CSS, Web Design and tagged , , by with comments disabled.