Usar dos imágenes de fondo con CSS3

Tras un tiempo en que estamos publicando menos (nos hemos tomado un descanso que necesitábamos) volvemos, poco a poco, a nuestro ritmo habitual...

Durante este tiempo hemos desarrollado algunos sitios webs nuevos, en uno de ellos hemos usado dos imágenes y degradado para el fondo del body. Esta posibilidad que nos ofrece CSS3 nos abre muchas puertas para el diseño web. En este caso se trataba de imitar un efecto de nueces cayendo y que se amontonaban en la parte de abajo del sitio. Como sabéis cada página, según sea su contenido, tiene diferentes longitudes y mantener esas nueces apiladas en el fondo nos obliga a usar dos imágenes.

Esto podemos conseguirlo solo con CSS añadiendo

body {
background-color: #000;
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -webkit-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -moz-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -ms-linear-gradient(top, #000, #fff);
background: url(URL_ALOJAMIENTO_IMG1) -4% top no-repeat, url(URL_ALOJAMIENTO_IMG2) -2% bottom no-repeat, -o-linear-gradient(top, #000, #fff);

Con este CSS logramos insertar dos imágenes sobre un degradado de fondo. Usamos márgenes negativos y porcentajes para que se sitúen donde queremos y sea adaptable la posición a la pantalla. Evidentemente solo disponible para navegadores que implementan estas características de CSS3.

Podéis verlo funcionando en Walnuters(aún en fase beta).