Color de Fondo - background-color

La propiedad background-color nos sirve para agregar un color de fondo a nuestro elemento.

Podemos agregar esta propiedad a cualquier elemento y el color se aplicará a todo el fondo incluyendo el margen interno (padding) y el borde.

Ejemplo

blockquote {background-color: #b4dbe6;}

Imagen de Fondo - background-image

La propiedad background-image permite agregar una imagen como fondo de una caja, esta propiedad puede convivir con el color.

Ejemplo

body { background-image: url(mi_imagen.png); }

La propiedad "background-imagen" tiene algunas características que se aplican por defecto, estas son:

  • Su punto de registro está ubicado en la esquina superior izquierda.
  • Su posición inicial siempre será la esquina superior izquierda del elemento.
  • La imagen utilizará un estilo mosaico para llenar el ancho y alto del elemento, esto es, se repetirá infinitamente en el eje-x y en el eje-y para cubrir totalmente el fondo (incluso si la imagen es más grande que el contenedor, está se considerará repetida hacia ambas direcciones).
  • Si se aplica color de fondo e imagen de fondo, esta ultima se ubicará sobre la primera.

Para modificar estos valores por defecto, existe una serie de propiedades relacionadas a "background-image":

  • background-repeat
  • background-position
  • background-attachment
  • background

Repetición del fondo - background-repeat

Como mencionamos anteriormente, si no agregamos esta propiedad la imagen se repetirá infinitamente en ambos ejes, para controlar este comportamiento utilizamos la regla background-repeat

Ejemplo

body { background-repeat: repeat; } - Valor por defecto body { background-repeat: repeat-x; } - Repetir solo en el eje X body { background-repeat: repeat-y; } - Repetir solo en el eje Y body { background-repeat: no-repeat; } - No repetir

Posición de la imagen de fondo - background-position

El atributo background-position define la posición del origen de la imagen.

La posición de una imagen está determinada por su ubicación horizontal y vertical, podemos asignar éstas a través de:

  • Unidades de medida
  • Porcentajes
  • Keywords

Unidades de medida

body { background-position: 200px 50px;}

En este caso asignamos las distancias del origen en ambos ejes. Siempre el valor horizontal va primero. Es decir, la imagen nacerá 200px a la derecha del origen y 50px hacia abajo. nota: Los valores también pueden ser negativos.

Porcentajes

body { background-position: 20% 100%;} body { background-position: 25%;}

En el caso del porcentaje los valores se aplican tanto al fondo como a la imagen, es decir, si aplicamos 100% al eje vertical (como en el ejemplo) la parte inferior de la imagen, calzará con la parte inferior del elemento contenedor.

Si sólo aplicamos un valor, el navegador asumirá que el faltante corresponde a 50%.

Al igual que en el ejemplo anterior, el valor horizontal va primero.

Keyword

Podemos utilizar seis palabras claves:

  • left
  • center
  • right
  • top
  • bottom
  • center

Los tres primeros se utilizan para el eje horizontal y los tres últimos para el eje vertical (Por eso la repetición del valor "center").

body { background-position: left bottom;} body { background-position: right center;} body { background-position: right;}

Si sólo aplicamos un valor, el navegador asumirá que el faltante corresponde a "center".

Al igual que en los ejemplos anteriores, el valor horizontal va primero.

Importante

CSS nos da la opción de mezclar los valores del atributo "background-position".

Ejemplo

p {background-position:center 300px;}

Sujeción del fondo - background-attachment

El atributo background-attachment podemos definir el estado de la imagen de fondo con respecto al resto del documento.

Por defecto, si ponemos una imagen de fondo, esta se moverá con el resto del contenido si movemos la barra de scroll del navegador, a través de CSS podemos modificar este comportamiento para que ésta quede fija en su posición.

body { background-attachment: scroll; } body { background-attachment: fixed; } body { background-attachment: inherit; }

Descripción

  • scroll es el valor por defecto e indica que la imagen se mueve con el resto del documento.
  • fixed la posición se mantiene en su posición en relación al área visible del navegador.
  • inherit indica que la imagen heredará este valor de su ancestro.

Atajo background

El atributo background permite resumir todas las propiedades del fondo a una sola linea.

Así, la siguiente regla:

body {
	background-color: 0xff0000;
	background-image: url(mi_imagen.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: fixed;
}

Puede resumirse utilizando la siguiente forma:

body{ background: 0xff0000 url(mi_imagen.png) no-repeat left top fixed; }

Descripción

El atajo está compuesto por:

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment

Importante

El orden de las propiedades es muy importante, debe ser mantenido.