Insertar una imagen de fondo en un TEXTAREA

Escrito por Mauro Rondinelli el Jueves 29 de Setiembre de 2005 a las 00:00hs

En el siguiente articulo veremos  ejemplos de como insertando una imagen de fondo en un TEXTAREA podes mejorar el aspecto del mismo.

Veamos un ejemplo de lo que queremos lograr...

Para lograr ese efecto solo demos crear la imagen punteada y mediante CSS indicar que queremos que esa imagen este de fondo en nuestro TEXTAREA, veamos el código...

<textarea name="textarea" cols="30" rows="4" style="background-image:url(fondo_textarea_1.gif); background-repeat: repeat"></textarea>

Dentro del parámetro style tenemos definido background-image que indica la ruta a la imagen que queremos poner de fondo y background-repeat: repeat que indica si queremos que esta imagen se repita, en este caso utilizamos repeat para que se repita a lo largo y a lo ancho, veamos un ejemplo de como repetir la imagen a lo largo...

Esa es una ejemplo mas de como aplicar las imágenes de fondo, veamos el código que tiene algunos cambios...

<textarea name="textarea" cols="30" rows="4" style="background-image:url(fondo_textarea_2.gif); background-repeat: repeat-y; padding-left: 10px"></textarea>

En este caso marcamos en negrita los cambios con respecto al codigo anterior, vemos que en background-repeat utilizamos como valor repeat-y que indica que la imagen se repetira en vertical y también agregamos padding-left: 10px que su función es crear una especie de margen a la izquierda de 10 pixeles (asi no pisamos la imagen con el texto).

A continuacion les dejo las imagenes para descargar...

 


comentarios



  1. Si esta bien interesante, me sera de mucha ayuda seguire bistando tu web bye



  2. buena man xvr publcaste justo lo que buscaba
    grax



  3. genial! justo lo que queria saber y no encontraba xD
    muchas gracias!!!



  4. Es un excelente tip , bueno almenos para mi que tengo un mes en HTML...
    Saludos...

agregar comentario


Se permiten las etiquetas HTML <b>, <i> y <p>. Si ingresa alguna dirección web o dirección de email serán convertidos en enlaces automáticamente.





publicidad