Hay propiedades de CSS2.1 que se mantienen igual, otras que se modifican y se crean nuevas propiedades.

Propiedades que no se modifican:

background-color: Para definir el color de fondo.

background-position: Para definir la posición del fondo.

Propiedades que se modifican:

background-image: Para definir la imagen de fondo. Ahora permite múltiples imágenes.

background-repeat: Para definir la repetición de la imagen del fondo. Se añaden los valores space y round y se permite la repetición de pareja de valores dobles que representa la repetición horizontal y vertical.

background-attachment: Para definir el desplazamiento. Admite un nuevo valor local.

Propiedades nuevas:

background-clip: Define el recorte el fondo.

background-origin: Define en inicio del fondo.

background-size: Define en tamaño del fondo.

background-image

Se puede utilizar múltiples imágenes de fondo con la propiedad background-image en combinación con las propiedades background-position y background-repeat. La primera imagen será la primera definida y el resto se irán colocando encima sucesivamente. Las imágenes se separan por comas. Si hay un color de fondo se coloca por debajo de las capas de las imágenes.

#fondomultiple {
width: 500px;
height: 250px;
background-image: url(fondo1.png), url(fondo2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
} 

background-repeat

Te permite repetir el fondo de una imagen, en CSS 2.1 se admitía un único valor entre repeat, repeat-x, repeat-y y no-repeat. En CSS3 va a permitir uno o dos valores (repetición horizontal y vertical) y vamos a añadir dos nuevos valores space y round. Chome, Opera y Safari admiten este doble valor y Opera admite los valores space y round.

El valor repeat equivale a repeat repeat, el valor repeat-x equivale a repeat no-repeat y el valor repeat-y equivale a no-repeat repeat.

Ejemplo:

<div style="background-image: url(fondo.jpg); background-repeat: repeat-x;">Capa con valor de fondo space </div>

equivale a:

<div style="background-image: url(fondo.jpg); background-repeat: repeat no-repeat;">Capa con valor de fondo space </div>

El valor space (que equivale a space space) rellena todo el fondo para ello espacia las imágenes horizontal y/o verticalmente para no cortar ninguna. Solo Opera lo admite pero solo lo ajusta verticalmente.

Ejemplo:

 
<div style="background-image: url(fondo.jpg); background-repeat: space;">Capa con valor de fondo space </div>

El valor round (que equivale a round round) rellena todo el espacio para ello escala la imagen de fondo horizontal y/o verticalmente para no cortar ninguna. Solo Opera lo admite pero solo lo ajusta verticalmente.

Ejemplo:

<div style="background-image: url(fondo.jpg); background-repeat: round;">Capa con valor de fondo round </div>

background-attachment

A los valores que ofrecía CSS 2.1: scroll (el valor por defecto, donde la imagen de fondo se desplaza con toda la página) y fixed (la imagen de fondo se queda fija en en el fondo), hay que añadir un nuevo valor: local.

El valor local el desplazamiento se hace respecto a la barra del contenedor (si la tuviese). Solo funciona con Chrome, Opera y Safari.

Ejemplo:

En este ejemplo con la propiedad overflow: auto que recorta lo que sobresale y pone una barra vertical de desplazamiento.

<div style="height: 6em; overflow: auto; padding-left: 6em;
background-image: url(fondo.jpg);
background-repeat: repeat-y; 
background-attachment: local;">Ejemplo valor local<br/><br/><br/><br/><br/></div>

background-clip

Es una nueva propiedad de CSS3 que nos permite recortar el área de fondo de una caja ajustándola al borde (border-box), al padding (padding-box) o al contenido (content-box). Por defecto está ajustada al borde.

background-clip: border-box|padding-box|content-box;

Ejemplo:

#ajustecontenido
{
padding:25px;
border:5px dotted #000000;
background-color:yellow; 
background-clip:content-box;
}

#ajustepadding
{
padding:25px;
border:5px dotted #000000;
background-color:yellow; 
background-clip:padding-box;
}

#ajusteborde
{
padding:25px;
border:5px dotted #000000;
background-color:yellow; 
background-clip:border-box;
}

<div id="ajustecontenido">Contenido</div>
<div id="ajustepadding">Padding</div>
<div id="ajusteborde">Borde</div>

background-origin

Nos permite definir el origen del fondo de una caja ajustándola al borde (border-box), al padding (padding-box) o al contenido (content-box). Por defecto está ajustada al borde.

background-origin: border-box|padding-box|content-box;

<style> 
div
{
border:10px solid black;
padding:35px;
background-image:url('fondo.jpg');
background-repeat:no-repeat;
background-position:left;
}
#origenborde
{
background-origin:border-box;
}
#origenpadding
{
background-origin:padding-box;
}
#origencontenido
{
background-origin:content-box;
}
</style>

<div id="origencontenido">Contenido</div>
<div id="origenpadding">Padding</div>
<div id="origenborde">Borde</div>

background-size

Nos permite definir el tamaño de la imagen de fondo.

background-size: longitud | porcentaje | auto {1,2} | cover | contain

Con el valor contain la imagen se dimensiona horizonal y/o verticalmente hasta que uno de los dos cubre todo el fondo. Con el valor cover se dimensiona horizontal y verticalmente hasta que se cubre totalmente el fondo. Tanto con contain como con cover se dimensiona la imagen proporcionalmente. El fondo puede tener un valor de longitud o porcentaje o auto, que hará referencia a la longitud horizontal y vertical de la imagen de fondo. Además podemos tener dos valores de longitud, porcentaje o auto o una combinación. El valor auto es el valor por defecto y su valor corresponde con el tamaño original de la imagen.

Ejemplo:

<div style="margin: 1px; outline: blue solid 1px; width: 150px; height: 200px;
padding: 0.7em; border: rgba(255,0,0,0.25)  solid 0.7em;
background-size: contain;
background-repeat: no-repeat;
background-image: url(fondo.gif);">Capa con contain</div>

Ejemplo:

Ejemplo cover.

<div style="margin: 1px; outline: blue solid 1px; width: 150px; height: 200px;
padding: 0.7em; border: rgba(255,0,0,0.25)  solid 0.7em;
background-size: contain;
background-repeat: no-repeat;
background-image: url(fondo.gif);">Capa con contain</div>

Ejemplos:

background-size: auto;
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: 50% 125;
background-size: contain;
background-size: cover; 

background

La propiedad abreviada fondo se suma a las propiedades de tamaño y origen. Podemos tener varios grupos separados por comas que representan cada una de las imágenes de fondo. Esta es la sintaxis:

background: [  , ]* 

 =  ||  [ /  ]? ||  ||  || {1,2} 

 =  ||  [ /  ]? ||  ||  || {1,2} ||  

Nota: background-color está únicamente permitida en la última capa.

<div style="width: 20em; padding: 1em; border: lime solid 1em;
background-color: yellow;
background-image: url(fondo.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: 10%;
background-size: 2em 1em;
background-origin: border-box;
background-clip: content-box;">...</div>

Es equivalente a

	
<div style="width: 20em; padding: 1em; border: lime solid 1em;
background: yellow url(fondo.gif) repeat-y fixed 
10% / 2em 1em border-box content-box;">...</div>

Ejemplo:

 
<div style="width: 20em; padding: 1em; border: lime solid 1em;
background: url(fondo1.gif) repeat-y fixed 
10% / 2em 1em border-box content-box, yellow url(fondo2.gif) repeat-y fixed 
10% / 2em 1em border-box content-box;">...</div>