Ir directamente al contenido de esta página

codexexempla.org

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.

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon

(cc) CodexExempla.org, 2007–2017 Mapa del sitio | XHTML | CSS | AA