CSS3

CSS Level 3

CSS3 MOLA!

Multiples backgrounds

Aquí utilizamos sólo dos imágenes:
la primera repetida cuatro veces, una por esquina
y la segunda repetida horizontalmente para rellenar el fondo. 

background:url('../img/svg-logo.png') top left no-repeat,
url('../img/svg-logo.png') top right no-repeat,
url('../img/svg-logo.png') bottom left no-repeat,
url('../img/svg-logo.png') bottom right no-repeat,
url('../img/HTML5_1Color_Black_100.png') center repeat-x;

Fondos degradados

Aquí utilizamos un fondo degradado 

background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(50%,#8c3310), color-stop(51%,#752201), color-stop(100%,#bf6e4e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* IE10+ */
background: linear-gradient(top, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%); /* W3C */

Fondos degradados

La imagen se amplía para cubrir todo el fondo 

	background-size:cover;
	background-origin:border-box;

La imagen se amplía hasta cubrir el area de contenido que tiene definida como origen 

	background-size:contain;
	background-origin:border-box;

La imagen se amplía un 50% de la dimensión de la caja que la contiene (el área de contenido del DIV) 

	background-size:50%;
	background-origin:border-box;