Estas propiedades describen el color (a menudo llamando en inglés foreground color, color de primer plano) y el fondo (background) de un elemento (es decir, la superficie sobre la cual se representa el contenido). Se puede establecer un color de fondo y/o una imagen de fondo. También se puede establecer la posición de la imagen, si la imagen se repite y cómo se repite, y si está fija o si se mueve con respecto al lienzo (es decir, si hace scroll).
La propiedad 'color' se hereda normalmente. Las propiedades de fondo no se heredan, pero el fondo del elemento padre se verá por defecto a través de los hijos, ya que el valor inicial de 'background-color' es transparente ('transparent').
Valor: <color>
Inicial: depende del UA
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A
Esta propiedad describe el color del texto de un elemento (color de primer plano o foreground color). Hay distintas maneras de especificar el color rojo:
EM { color: red } /* lenguaje natural */
EM { color: rgb(255,0,0) } /* RGB con rango 0-255 */
Véase en la sección 6.3 una descripción de los valores de color posibles.
Valor: <color> | transparent
Inicial: transparent
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad establece el color de fondo de un elemento.
H1 { background-color: #F00 }
Valor: <url> | none
Inicial: none
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Esta propiedad establece la imagen de fondo de un elemento. Cuando se establece una imagen de fondo, también debería establecerse un color de fondo que se usará en el caso de que la imagen no esté disponible. Cuando la imagen esté disponible, se superpone al color de fondo.
BODY { background-image: url(marmol.gif) }
P { background-image: none }
Valor: repeat | repeat-x | repeat-y | no-repeat
Inicial: repeat
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Si se especifica una imagen, el valor de 'background-repeat' determina si la imagen se repite y cómo se repite.
Un valor de 'repeat' significa que la imagen se repite tanto horizontal como verticalmente. El valor 'repeat-x' ('repeat-y') hace que la imagen se repita horizontalmente (verticalmente), creando una sola banda de imágenes de un lado a otro (de arriba a abajo). Con un valor 'no-repeat' la imagen no se repite.
BODY {
background: red url(pendiente.gif);
background-repeat: repeat-y;
}
En el ejemplo, la imagen sólo se repetirá verticalmente.
Valor: scroll | fixed
Inicial: scroll
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: N/A
Si se especifica una imagen de fondo, el valor de 'background-attachment' determina si ésta está fija con relación al lienzo, o si se mueve (hace scroll) junto con el contenido.
BODY {
background: red url(pendiente.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 básico: Los AAUU puede tratar 'fixed' como 'scroll'. Sin embargo, se recomienda que interpreten 'fixed' correctamente, al menos en los elementos HTML y BODY, ya que no es posible para un autor especificar una imagen de fondo únicamente para los browsers que soporten 'fixed' (Véase la sección 7.)
Valor: [<porcentaje> | <longitud>]{1,2} | [top | center | bottom] || [left | center | right]
Inicial: 0% 0%
Se aplica a: elementos en bloque y elementos reemplazados
Se hereda: no
Valores porcentuales: se refieren al tamaño del propio elemento
Si se ha especificado una imagen de fondo, el valor de 'background-position' especifica la posición inicial.
Con un par de valores '0% 0%', la esquina superior izquierda de la imagen se coloca en la esquina superior izquierda del cuadro que rodea al contenido del elemento (es decir, no la del cuadro que rodea a relleno, borde y margen). Un par de valores '100% 100%' coloca la esquina inferior derecha de la imagen en la esquina inferior derecha del elemento. Con un par de valores '14% 84%', el punto que está al 14% de la izquierda de la imagen y al 84% de su parte superior se coloca en el punto que está al 14% de la izquierda del elemento y al 84% de su borde superior. Con un par de valores de '2cm 2cm', la esquina superior izquierda de la imagen se coloca a 2 cm a la derecha y 2 cm por debajo de la esquina superior izquierda del elemento.
Si sólo se da un valor porcentual o una longitud, este valor sólo establece la posición horizontal, y la posición vertical será el 50%. Si se dan dos valores, la posición horizontal corresponde al primero. Se permite combinar longitudes con valores porcentuales, p.ej., '50% 2cm'. Se permiten posiciones negativas.
También se pueden usar como valores palabras clave que indican la posición de la imagen de fondo. Las palabras clave no pueden combinarse con valores porcentuales ni con longitudes. Las combinaciones posibles de palabras clave y sus interpretaciones son las siguientes:
Ejemplos:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
Si la imagen de fondo está fija con relación al lienzo (véase la propiedad 'background-attachment' más arriba), la imagen se coloca con relación al lienzo y no con relación al elemento. P.ej.:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
En este ejemplo, la imagen se coloca en la esquina inferior derecha del lienzo.
Valor: <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position>
Inicial: no definido para propiedades abreviadas
Se aplica a: todos los elementos
Se hereda: no
Valores porcentuales: permitidos para <background-position>
La propiedad 'background' es una propiedad abreviada para establecer las propiedades de fondo individuales (es decir, 'background-color', 'background-image', 'background-repeat', 'background-attachment' y 'background-position') en un mismo lugar de una hoja de estilo.
Los valores posibles de las propiedades 'background' son el conjunto de todos los posibles para cada una de las propiedades individuales.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
La propiedad 'background' siempre establece todas las propiedades individuales. En la primera regla del ejemplo precedente, sólo se ha dado un valor para 'background-color', y todas las demás propiedades individuales se han establecido a su valor inicial. En la segunda regla, se han especificado todas las propiedades individuales.