vagacode

Los navegadores interpretan las propiedades CSS como se les da la gana, algunos de una forma, otros de otra; con el tiempo, esto ha mejorado bastante aunque siguen habiendo diferencias. Para colmo, a esas propiedades les agregan extensiones, funciones o características propias que no son parte de los estándares o que son experimentales.

Si bien es cierto que no se aplicarán a todos, nada impide que las usemos siempre y cuando chequeemos nuestro sitio y verifiquemos que se ve de manera más o menos razonable en cualquiera de ellos.

La propiedad background-clip controla la forma en que se muestran los fondos (colores o imágenes) con relación a sus bordes o paddings y puede tener tres valores:

border-box el fondo se extiende incluyendo el borde pero, debajo de este y es el valor por defecto
padding-box el fondo no se muestra debajo del borde pero incluye el padding
content-box el fondo no incluye el borde ni el padding

div.clip {
	background-color: #add8e6;
	border: 10px dotted #6495ed;
	height: 200px;
	padding: 10px;
}

La propiedad background-origin define desde dónde comenzará a mostrarse la imagen y permite los mismos tres valores anteriores:

border-box la imagen se extiende incluyendo el borde
padding-box la imagen no se muestra debajo del borde pero incluye el padding y es el valor por defecto
content-box la imagen no incluye el borde ni el padding

Un ejemplo:

div.origin {
	background-image: url(http://i.imgur.com/fa6uW2S.jpg);
	background-position: 0 0;
	background-repeat: no-repeat;
	border: 10px dotted #6495ed;
	height: 200px;
	padding: 10px;
}

Como se ve en el ejemplo con el valor content-box, el padding inferior queda cubierto ya que el contenedor tiene una altura menor que la imagen.

Hay que tener en cuenta que indicando en background-repeat valores distintos de no-repeat, los resultados no son los mismos.