Foros del Web » Creando para Internet » CSS »

Cambiar texto h1, h2 por imagen

Estas en el tema de Cambiar texto h1, h2 por imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/11/2005, 05:00
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona (España)
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Cambiar texto h1, h2 por imagen

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
  #2 (permalink)  
Antiguo 04/11/2005, 05:18
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
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...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 04/11/2005, 06:00
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Lo realizás de la siguiente manera:

h1 {
display:none;
}

Saludos
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #4 (permalink)  
Antiguo 04/11/2005, 06:07
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
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!
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #5 (permalink)  
Antiguo 04/11/2005, 06:36
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona (España)
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
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!!!
  #6 (permalink)  
Antiguo 04/11/2005, 09:07
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Cita:
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
__________________
Al final del día hablar es gratis, codificar no lo es
  #7 (permalink)  
Antiguo 04/11/2005, 09:08
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
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

Última edición por RoQ; 04/11/2005 a las 09:18
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 13:42.