AnaBeleita

En más de una ocasión nos veremos con la necesidad de utilizar etiquetas del tipo header (<h1>,<h2>, etc.), <strong> o cualquier otra en nuestras webs por razones de SEO y Accesibilidad, pero un texto html no siempre queda bien, sobre todo porque, por ejemplo, queramos colocar en lugar del nombre el logo de la página en cuestión.

Os dejo un par de formas para hacerlo, yo hasta hace poco utilizaba siempre la primera de ellas pero ahora estoy probando con la segunda.

1. Ocultar texto con “display:none” y mostrar en su fondo el logo:

en el xhtml:
<h1 id=”logo”>
<span>abeleita<span>
</h1>

y el css:

h1#logo {
width: 250px;
height: 25px;
background-image: url(logo.gif);
}

h1#logo span {
display: none;
}

2. Desplazar el texto  fuera de la ventana del navegador y mostrar su fondo:

en el xhtml:
<h1 id=”logo”>
abeleita
</h1>

y el css:

h1#logo {
width: 250px;
height: 25px;
background-image: url(logo.gif);
text-indent: -9999px;
}