Como crear caja de texto con imagen?

yona_18 · #1 (**permalink**) 19/09/2009, 13:16

Hola, alguien me podria decir como hacer una caja de texto con una imagen?

Como en esta pagina: http://rapid-hook.com/

Espero que me puedan ayudar, Saludos. Gracias.

PD: Esta es la imagen que usan: http://rapid-hook.com/images/link-box.png

Saludos.

deirdre · #2 (**permalink**) 19/09/2009, 17:36

Hola yona_18

Seguramente esto te lo soluciona:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fondo de imagen para caja de texto</title>
<style type="text/css">
.cajadetexto {
	background-image: url('mi_imagen.jpg')
}
</style>
</head>

<body>

<form method="post">
	<textarea name="cajadetexto" cols="20" rows="2" class="cajadetexto"></textarea>
</form>

</body>

</html>

Bye

yona_18 · #3 (**permalink**) 20/09/2009, 15:45

Cita:

Iniciado por deirdre

Hola yona_18

Seguramente esto te lo soluciona:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fondo de imagen para caja de texto</title>
<style type="text/css">
.cajadetexto {
	background-image: url('mi_imagen.jpg')
}
</style>
</head>

<body>

<form method="post">
	<textarea name="cajadetexto" cols="20" rows="2" class="cajadetexto"></textarea>
</form>

</body>

</html>

Bye

No me anduvo. Gracias igual.

kseso? · #4 (**permalink**) 20/09/2009, 15:55

¿Utilizas css?

Código css:

Ver originaltextarea {
background:transparent url(ruta/tuimagen.xxx);
/* resto de propiedades que necesites*/
}

deirdre · #5 (**permalink**) 20/09/2009, 16:01

Cita de yona_18

"No me anduvo. Gracias igual."

Estás en un error: funciona perfectamente desde ie6 hasta safari4 pasando por todos los navegadores. Haz un copia-pega y ponle el nombre de tu imagen y verás que funciona correctamente. Otra cosa es que tengas que adaptarlo a tus necesidades: tamaño, colocación, et.

Bye

yona_18 · #6 (**permalink**) 20/09/2009, 17:03

Listo, ya esta. Gracias!