👨‍💻 Sobre la propiedad background-origin (origen de fondo)

 

 

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;
}

        <div class="bkorigin"><p>el valor por defecto</p></div>
        

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:

background-origin: border-box | padding-box | content-box | inherit;

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(http://w3.unpocodetodo.info/css3/images/flores.jpg);
	background-repeat:no-repeat;
}
#borderBox{background-origin:border-box;}

        <div class="bkorigin" id="borderBox"><p>border-box</p>
        

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;}

        <div class="bkorigin" id="paddingBox"><p>padding-box</p>