w3.unpo<code>todo

background-origin

La propiedad background-origin es utilizada para determinar como se calcula la posición ( background-position ) de la imagen de fondo ( background-image ). Por defecto la imagen de fondo empieza al margen exterior del relleno ( padding ).

.bkorigin {
	width:200px; 
	height:200px; 
	border:10px dashed black;
	padding:10px;
	background-image:url(images/flores.jpg);
	background-repeat:no-repeat;
}

el valor por defecto

Sintaxis

Exactamente como en el caso de la propiedad background-clip, los valores que puede tomar la propiedad background-origin son:

border-box

Si background-origin: border-box; la imagen de fondo empieza al margen exterior del borde y por debajo de este ( es muy evidente en el caso de los bordes anchos y discontinuos ).

.bkorigin {
	width:200px; 
	height:200px; 
	border:10px dashed black;
	padding:10px;
	background-image:url(images/flores.jpg);
	background-repeat:no-repeat;
}
#borderBox{background-origin:border-box;}

border-box

padding-box

Si background-origin: padding-box; la imagen de fondo empieza al margen exterior del relleno ( padding ). Si la propiedad background-origin no esta declarada, padding-box es el valor por defecto.

.bkorigin {
	width:200px; 
	height:200px; 
	border:10px dashed black;
	padding:10px;
	background-image:url(images/flores.jpg);
	background-repeat:no-repeat;
}
#paddingBox{background-origin:padding-box;}

padding-box

content-box

Si background-origin: content-box; la imagen empieza al margen exterior del contenido de la caja.

.bkorigin {
	width:200px; 
	height:200px; 
	border:10px dashed black;
	padding:10px;
	background-image:url(images/flores.jpg);
	background-repeat:no-repeat;
}
#contentBox{background-origin:content-box;}

content-box