Colores y fondos

Tabla de contenidos

1. background
2. background-attachment
3. background-color
4. background-image
5. background-position
6. background-repeat
7. color

background [propiedad de conjunto]

Descripción

Propiedad de conjunto para definir el aspecto del fondo de un elemento. Engloba las propiedades background-attachment, background-color, background-image, background-position y background-repeat.

Aplicable a

Todos los elementos.

¿Heredada?

No.

background-attachment

Descripción

Indica si la imagen de fondo de un elemento debe desplazarse con él al desplazar la barra de scroll, o permanecer fija con respecto al cuerpo del documento.

Valores posibles

• scroll: El fondo se desplaza al mover la barra de desplazamiento.
• fixed: El fondo se mentiene fijo con respecto al documento, independientemente de que se mueva la barra de scroll.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

scroll.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Notas

Cuando background-attachment se establece en fixed, las coordenadas x e y de la propiedad background-position no se refieren a los ejes del elemento al que se asigna la imagen de fondo, sino a los ejes del documento.

Ver ejemplos de los valores de background-attachment.

background-color

Descripción

Indica el color de fondo de un elemento.

Valores posibles

• Un color.
• transparent: Indica que el fondo ha de ser tranparente.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

transparent.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Ver ejemplos de los valores de background-color.

background-image

Descripción

Indica una imagen que se establece como fondo de un elemento.

Valores posibles

• Un URL: Especifica la ubicación de la imagen que se quiere emplear como fondo.
• none: Indica que no debe emplearse ninguna imagen de fondo.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

none.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Ver ejemplos de los valores de background-image.

background-position

Descripción

Establece el punto de origen de una imagen que se establecer como fondo de un elemento.

Valores posibles

• Coordenadas x e y.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

0% 0%.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Notas

Al especificar la posición de una imagen de fondo, se pueden especificar dos valores separados por un espacio, o bien uno solo. En el primer caso, se considera que el primer valor es la coordenada x y el segundo la y. En el segundo, se asume que el valor es el de x, y se asigna center a la posición vertical; la única excepción es la palabra clave center, que si aparece sola se aplica a ambos ejes.

Los valores para la coordenada x pueden ser:

• Una medida absoluta, relativa o porcentual. El porcentaje se refiere a la anchura del elemento padre.
• left: El borde izquierdo de la imagen se sitúa en la arista izquierda de la caja del elemento.
• center: La imagen se centra con respecto al eje central vertical.
• right: El borde derecho de la imagen se sitúa en la arista derecha de la caja del elemento.

Los valores para la coordenada y pueden ser:

• Una medida absoluta, relativa o porcentual. El porcentaje se refiere a la altura del elemento padre.
• top: El borde superior de la imagen se sitúa en la arista superior de la caja del elemento.
• center: La imagen se centra con respecto al eje central horizontal.
• bottom: El borde inferior de la imagen se sitúa en la arista inferior de la caja del elemento.

Ver ejemplos de los valores de background-position.

background-repeat

Descripción

Establece si una imagen aplicada como fondo de un elemento debe repetirse como mosaico, y de ser así si debe hacerlo a lo largo del eje horizontal, del vertical, o de ambos.

Valores posibles

• repeat: La imagen se repite como mosaico hasta cubrir la totalidad del fondo del elemento.
• repeat-x: La imagen se repite, pero sólo a lo largo del eje horizontal.
• repeat-y: La imagen se repite, pero sólo a lo largo del eje vertical.
• no-repeat: La imagen no se repite.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

repeat.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Notas

Cuando se especifica que se repita una imagen, ésta se extiende sobre el eje elegido en ambos sentidos. Esto quiere decir que la posición inicial especificada para un eje en el que se aplica la repetición se vuelve irrelevante: no se puede, por ejemplo, indicar que una imagen se repita hacia la derecha a partir de los 50 píxeles del eje de la x.

Ver ejemplos de los valores de background-repeat.

color

Descripción

Determina el color del texto de un elemento.

Valores posibles

• Un color.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

Depende del agente de usuario.

Aplicable a

Todos los elementos.

¿Heredada?

Sí.

Ver ejemplos de los valores de color.