background: define los valores de fondo que podemos darle a un elemento.<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> || <inherit>

background-color : Establece un color de fondo para un elemento.Valor por defecto transparent.

background-image : Establece una imagen como fono para un elemento.Valor por defecto none. Además se pueden añadir varias imagenes de fondo, para ello pondremos en cada característica background-image cada dirrecion url de la imagen y estas separadas por coma.

background-repeat : Controla la forma en la que la imagen de fondo que asignemos se repite.Valor por defecto repeat.

background-position : Con esta característica definimos la posición donde queremos colocar la imagen de fondo en el elemento. Valor por defecto 0% 0%

background-attachment : Define el comportamiento de la imagen de fondo. Su valor por defecto es scroll.

background-size : Define el comportamiento de la imagen de fondo. Actualmente tiene mucha importancia por los tamaños de monitores y facilita la vida al diseñador.Su valor por defecto es auto.

Se pueden definir sus sintaxis de cuatro maneras distintas:

background-origin : Define dónde pintar el fondo: a través de todo el elemento, dentro del borde o dentro del relleno. Es similar a background-clip excepto que redimensiona el fondo en lugar de recortarlo.

background-clip : Permite controlar hasta qué punto una imagen o un color de fondo se extiende más allá del relleno o del contenido de un elemento.

background : Además de poner de fondo una imagen o un color, podemos usar la característica de degradado para ponerlo de fondo. Un degradado se podrá usar en cualquier lugar en el que se pueda usar un valor url(), como en background-image,border-image,list-style-type.

Herramienta para ver como trabajan las características de background.

Más información: