Al realizar un sitio web puede llegar a pasar que nos encontremos ante la necesidad de hacer que una imagen de fondo se convierta en un link, esto puede ocurrir cuando el logo esta siendo usado como fondo en la cabecera del sitio y queremos que, como cualquier sitio bueno, el mismo actúe de link a la página de inicio.

Con el siguiente truco CSS que les traigo, les resultará extremadamente sencillo convertir una imagen que esté cumpliendo el rol de papel tapiz en nuestro sitio en una en la que se pueda realizar clic hacia un link.

Partiendo del siguiente código HTML:

<div id=”header”></div>
#header {
background: #fff url(images/header.png) no-repeat;
height: 101px;
width: 800px;
}

Todo lo que tenemos que hacer para lograr esto es, en el mismo código, añadir el link al que deseamos que la imagen nos redireccione entre los tags div de nuestra cabecera y añadir al CSS la propiedad “display: block” para forzar al link a llenar todo el espacio.

Para manejar aquellos navegadores que todavía no soportan CSS deberíamos agregar un texto que indique que el span contiene un link que ocultaremos con nuestro CSS.

El resultado final de nuestro código es el siguiente:

<div id=”header”><a href=”http://mysite.com” ><span>MySite.com</span></a></div>
#header a {
background: #fff url(images/header.png) no-repeat;
display: block;
height: 101px;
width: 800px;
}
#header a span {
visibility: hidden;
}

Y, así de sencillo, habremos convertido nuestro fondo en una imagen en la cual podremos agregar links perfectamente.