Cambiar texto h1, h2 por imagen

[xberni]

Hola,

Una pregunta: como oculto el texto de un h1 (o h2 o h3) y que me muestre una imagen?

La imagen con background-image, pero no consigo hacer desaparecer el texto.

Muchas gracias

[webosiris]

podés probar a poner el mismo color de fuente y de fondo.... pero no sé para qué querés hacer desaparecer el texto... entiendo... si explicaras mejor el porqué, quizás halla otras alternativas...

[Daniel Ulczyk]

Lo realizás de la siguiente manera:

h1 {
display:none;
}

Saludos

[Daniel Ulczyk]

En mi prisa, quedaron algunas cosas pendientes:
Para lograr el efecto conseguido, debés tener la etiqueta h1, dentro de un div.
En mi ejemplo lo llamo encabezado, de esa manera le podés asignar un valor superior al alto de la imagen y luego ocutás a h1:

#encabezado h1 {
height:60px;
display:none;
}

Y para poner una imagen en lugar de h1, podés hacer lo siguiente:

#encabezado{
width: 100%;
margin-top:0px;
background-image: url(imagen.gif);
background-repeat: no-repeat;
background-position: left center;
height:125px;
}

Espero la idea te sea útil.


Saludos y suerte!

[xberni]

Perfecto! Gracias a todos!

Estoy empezando a ponerme las pilas con la maquetación con divs y enterrar de una vez por todas las tablas y, joder, me está costando!

Abajo las tablas!!!

[baccxus]

Iniciado por xberni

Hola,

Una pregunta: como oculto el texto de un h1 (o h2 o h3) y que me muestre una imagen?

La imagen con background-image, pero no consigo hacer desaparecer el texto.

Muchas gracias

Conoces el reemplazo de textos:
http://www.disenorama.com/articulos/...textos_una.htm

Mira a ver si es lo que necesitas

Saludos

[RoQ]

yo cambio los h1 que tiene enlace a la pagina de la siguiente manera:

en el HTML

Código:

<h1>
<a href="/">
Titulo principal que a la vez es un enlace
</a>
</h1>

y en el CSS

Código:

h1{
	width:780px; /* ancho de tu imagen */
	height: 200px; /* alto de tu imagen */
	background-image: url(logo.jpg); /*imgen que pones de fondo y que reemplaza al texto */
	}
h1 a{
	display:block; /* lo muestras en bloque para darle al ancho y alto total de la imagen */
	width: 100%;
	height: 100%;
	text-decoration: none;
	text-indent: -10000px; /* retiro el texto */
	}

de esa manera muestro la imagen, el texto no se para los ususarios pero si para los buscadores y conservo el enlace.

EDIT: mmmm, yo siempre relaciono el H1 con el encabezado generl de la pagina, es decir donde va el logo en la parte mas arriba de la web, ahora si te refieres a los demas encabezados, la web que te recomendo baccxus es muy buena