Pseudo-elemento con background-position

Os muestro como utilizar una imagen de fondo (background) que se pueda colocar fuera del div o contenedor utilizando el pseudo-elemento ::before y la propiedad content para que actúe como un fondo adicional.

Esto es posible utilizando CSS3, pero todavía no está implementado en muchos navegadores. Esta técnica de pseudo-elemento también tiene el beneficio adicional de ser capaz de recortar una imagen de fondo e incluso la posición de que parcial o totalmente, fuera de su contenedor sin utilizar ningún otro elemento extra.

.caja {
	position: relative;
	width:500px;
	height:250px;
	margin:0 auto;
	padding: 20px;
	background: #fff;
	border: 1px solid #bbb;
	z-index: 1;
}
.caja::before {
	position: absolute;
	bottom: -30px;
	right: -64px;
	width: 128px;
	height: 128px;
	background: url(candle.png);
	content: '';	
	z-index: -1;
}

Navegadores válidos : Firefox 3.5 +, 3 + Chrome, Safari 3 +, Opera 10 +, Internet Explorer 8 +.