Lenguajes
Web/Otros
Extra
Enlaces

Poner fondo a cualquier elemento con CSS

Sin CSS estábamos limitados a poner colores e imágenes de fondo solo en el cuerpo de la web y en tablas. Ahora con CSS, podemos aplicar tanto una imagen de fondo como un color de fondo a prácticamente cualquier elemento de nuestra web.

Lo más sencillo es poner un color de fondo, por ejemplo, si tenemos un texto marcado en negrita y queremos ponerle un color de fondo azul haremos:

<strong style="background-color: #3333FF">Texto en negrita</strong>

Pero no estamos limitados a un color de fondo, también podemos poner una imagen:

<strong style="background-image: url(imagen.jpg)">Texto en negrita</strong>

Para que funcione, en este caso, el archivo "imagen.jpg" debe estar en el mismo directorio que el archivo .html. Aunque podemos usar cualquier tipo de ruta como por ej /imagenes/fondo.jpg o ../fondo.jpg.

También podemos manipular el fondo, podemos hacer que esté alineado a la izquierda y que no se repita. Aunque esto lo probaremos en una celda, para poder verlo mejor:

<table>
<tr>
<td height="50" style="background-image: url(imagen.jpg); background-repeat: no-repeat; background-position: left;">Fondo</td>
</tr>
</table>

El fondo no se repetirá y estará alineado a la izquierda. Todo lo que hemos visto aquí también lo podemos aplicar a campos de un formulario o a cualquier otra etiqueta.


Redactado por Nenillo

¿Dudas? ¡Cualquier duda será atendida en nuestro Foro!

Inicio | JavaScript necesario para este enlace

Noticias en RSS2 XHTML Vlido CSS Vlido