Propiedades background y color

• Color
• Background Color (Color de fondo)
• Background Image (Imagen de fondo)
• Background Repeat (Repetir fondo)
• Background Attachment (Fijación de fondo)
• Background Position (Posición del fondo)
• Background (Fondo)

Color

La propiedad color permite especificar el color de un elemento. Vea la sección Unidades para descripciones del valor de colores, Algunos ejemplos de reglas de color:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberían especificarse juntas las propiedades background y color.

Background Color (Color de fondo)

La propiedad background-color establece el color del fondo de un elemento. Por ejemplo:

BODY { background-color: white }
H1   { background-color: #000080 }

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre que use background-color debería especificarse background-image. En la mayoría de casos, background-image: none es adecuado.

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-color.

Background Image (Imagen de fondo)

La propiedad background-image establece la imagen de fondo de un elemento. Por ejemplo:

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

Cuando se define una imagen de fondo (background image), también debería definirse un background color (color de fondo) similar para aquellos que no cargan las imágenes.

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-image.

Background Repeat (Repetir fondo)

La propiedad background-repeat determina como se repite la background image (imagen de fondo) especificada. El valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-y repetirá la imagen verticalmente. Por ejemplo:

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

En el ejemplo de arriba, la imagen solo será organizada en mosaico horizontal.

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-repeat.

Background Attachment (Fijación de fondo)

La propiedad background-attachment determina si la background image (imagen de fondo) especificada se desplazará con el contenido o será fija con respecto al lienzo. Por ejemplo, la línea siguiente especifica una imagen de fondo fija:

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-attachment.

Background Position (Posición del fondo)

La propiedad background-position da la posición inicial de la background image (imagen de fondo) especificada. Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados. (Un elemento reemplazado es aquel del que solo se conocen las dimensiones intrínsecas; los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT, y OBJECT.)

La forma más sencilla de asignar una ubicación de fondo es con palabras clave:

• Palabras clave horizontales (left, center, right)
• Palabras clave horizontales verticales (top, center, bottom)

También pueden usarse porcentajes y longitudes para asignar la posición de la imagen de fondo. Los porcentajes son relativos al tamaño del elemento. Aunque se permiten longitudes, no se recomiendan debido a su inherente debilidad al tratar con diferentes resoluciones de pantalla.

Al usar porcentajes o longitudes, la posición horizontal se especifica primero, seguida de la posición vertical. Un valor como 20% 65% especifica que la imagen se colocará 20% a la derecha y 65% abajo del elemento. Un valor como 5px 10px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 10 pixels abajo de la esquina superior izquierda del elemento.

Si solo se da el valor horizontal, la posición vertical será 50%. Se permiten combinaciones de longitudes y porcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm está permitido. Sin embargo, porcentajes y longitudes no pueden combinarse con palabras clave.

Las palabras clave son interpretadas como sigue;

• top left = left top = 0% 0%
• top = top center = center top = 50% 0%
• right top = top right = 100% 0%
• left = left center = center left = 0% 50%
• center = center center = 50% 50%
• right = right center = center right = 100% 50%
• bottom left = left bottom = 0% 100%
• bottom = bottom center = center bottom = 50% 100%
• bottom right = right bottom = 100% 100%

Si la imagen de fondo está fija en relación al lienzo, la imagen es colocada en relación al lienzo y no al elemento.

Los autores también pueden usar la foma rápida de la propiedad background, que está mejor soportada que la propiedad background-position.

Background (Fondo)

La propiedad background es una forma rápida para las propiedades más específicas relacionadas con background. Algunos ejemplos de declaraciones de background:

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../fondos/peon.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(hojas.jpg) no-repeat bottom right }

Un valor no especificado recibirá el valor inicial. Por ejemplo, en las tres primeras reglas de arriba, la propiedad background-position será establecida a 0% 0%.

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberían especificarse juntas las propiedades background y color.

Mantenido por John Pozadzides y Liam Quinn

ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.