Esta propiedad define el color de fondo del elemento.
Esta propiedad define la imagen de fondo del elemento.
Es decir que podemos poner una imagen de fondo.
Este propiedad necesita la función url("") para mandar a llamar una imagen.
Esta propiedad define como es que se va a repetir la imagen de fondo en el elemento.
Su valor por defecto es repeat.
Tambien tiene los valores:
repeat-x: La imagen se repite solo en el eje horizontal (x).
repeat-y: La imagen se repite solo en el eje vertical (y).
Tambien tiene el valor no-repeat para que la imagen se
repita solo una vez, esto es independientemente del tamaño de la imagen.
Esta propiedad define el tamaño de la imagen de fondo. El primer valor es para el eje X (ancho, width), el segundo valor eje Y (alto, height).
A esta propiedad le podemos a signar dos valores:
cover: Cambia el tamaño de la imagen de fondo para
asegurarse de que permanesca completamente visible, adapta la imagen al
tamaño de la caja pero no asegura que se vea toda la imagen por completo.
contain: Cambia el tamaño de la imagen de fondo para
asegurarse de que cubre completamente el elemento, se asegura que la imagen
en su totalidad se vea por completo y que cubra la caja contenedora.
Esta propiedad define la posición de la imagen de fondo, El primer valor es para
el eje X (ancho, width), el segundo valor eje Y (alto, height), sino se
especifica un segundo valor este cera center.
Aparte de los valores númericos podemos indicar el posicionamiento con los
valores: center, top, bottom,
left y right
Esta propiedad define cuánto debe extenderse el fondo dentro del elemento.
Su valor por defecto es border-box, es decir que va a cubrir
hasta el elemento del borde, tiene mucha relacion con el box model.
Esta propiedad define la posicion desde donde debe empezar la imagen de fondo.
Su valor por defecto es padding-box.
Esta propiedad define como se comportará la imagen de fondo al desplazarse por la página.
Su valor por defecto es scroll que hace que la imagen de
fondo se mueva junto con su contenedor cuando scrolleamos en la pantalla.
con el vaor fixed la imagen se posiciona fijamente sobre el
area del viewport y conforme vamos scrolliando la pantalla se va visualizando la
imagen.
Esta propiedad es el atajo (o shorthand) de totdas las porpiedades anteriores y
el orden en que van los valores es:
background-image, background-position,
background-size, background-repeat,
background-origin, background-clip,
background-attachment y background-color.
NOTA: En la medida de lo posible evita usar el shorthand
background, no es una buena practica es mejor usar cada una de las porpiedades
anteriores
por separado.
Todas la propiedades de background pueden recibir varias imagens de
fondo separadas por comas ",".