Fondo HTML

Un buen fondo hace que el sitio se vea especialmente bien.

Ejemplo

Buena combinación de fondo y color
Un ejemplo de buena combinación de color de fondo y color de texto, lo que facilita la lectura de los textos en la página.
Mala combinación de fondo y color
Un ejemplo de mala combinación de color de fondo y color de texto, lo que dificulta la lectura de los textos en la página.

(Puedes encontrar más ejemplos en la parte inferior de esta página)

Fondo (Backgrounds)

<body> Tiene dos etiquetas configuradas para el fondo. El fondo puede ser un color o una imagen.

Color de fondo (Bgcolor)

La propiedad de color de fondo establece el color de fondo en algún color. El valor puede ser un número hexadecimal, un valor RGB o un nombre de color.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

El código anterior establece el color de fondo en negro.

Fondo (Background)

La propiedad de fondo establece el fondo en una imagen. El valor de la propiedad es la URL de la imagen. Si el tamaño de la imagen es menor que la ventana del navegador, la imagen se replicará en toda la ventana del navegador.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

La URL puede ser una dirección relativa, como en la primera línea de código. También puede ser una dirección absoluta, como en la segunda línea de código.

Consejo:Si planeas usar imágenes de fondo, necesitas recordar los siguientes puntos:

  • ¿Las imágenes de fondo aumentan el tiempo de carga de la página? Consejo: Los archivos de imágenes no deben superar los 10k.
  • ¿Las imágenes de fondo combinan bien con otras imágenes en la página?
  • ¿Las imágenes de fondo combinan bien con los colores del texto en la página?
  • ¿Las imágenes, al extenderse en la página, se ven bien?
  • ¿Las imágenes de fondo distraen la atención del texto?

Consideraciones básicas - consejos útiles:

Las propiedades de color de fondo (bgcolor), fondo (background) y texto (text) en el etiqueta <body> han sido descontinuadas en los estándares más recientes de HTML (HTML4 y XHTML). W3C ha eliminado estos atributos en sus estándares recomendados.

Debería usar hojas de estilo en capas (CSS) para definir el diseño y las propiedades de visualización de los elementos HTML.

Más ejemplos

Imágenes de fondo de alta accesibilidad
Ejemplo en el que las imágenes de fondo y los colores del texto hacen que el texto de la página sea fácil de leer.
Imágenes de fondo de alta accesibilidad 2
Otro ejemplo en el que las imágenes de fondo y los colores del texto hacen que el texto de la página sea fácil de leer.
Imágenes de fondo de mala accesibilidad
Ejemplo en el que las imágenes de fondo y los colores del texto hacen que el texto de la página sea difícil de leer.