Acerca del Web Design Group

Propiedades background y color



Color

Sintaxis: color: <color>
Valor inicial: Determinado por el navegador
Se aplica a: Todos los elementos
Heredado: Si

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)

Sintaxis: background-color: <valor>
Valores posibles: <color> | transparent
Valor inicial: transparent
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: background-image: <valor>
Valores posibles: <url> | none
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: background-repeat: <valor>
Valores posibles: repeat | repeat-x | repeat-y | no-repeat
Valor inicial: repeat
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: background-attachment: <valor>
Valores posibles: scroll | fixed
Valor inicial: scroll
Se aplica a: Todos los elementos
Heredado: No

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)

Sintaxis: background-position: <valor>
Valores posibles: [<porcentaje> | <longitud>]{1,2} | [top | center | bottom] || [left | center | right]
Valor inicial: 0% 0%
Se aplica a: Elementos de nivel bloque y elementos reemplazados
Heredado: No

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:

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;

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)

Sintaxis: background: <valor>
Valores posibles: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No

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


Web Design Group ~ ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

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