<div id="container">
<div id="inputs">
<label><input name="type" type="radio" value="border-box" checked/>border-box</label>
<label><input name="type" type="radio" value="padding-box"/>padding-box</label>
<label><input name="type" type="radio" value="content-box"/>content-box</label>
</div>
<div id="element"><h3>background-origin</h3></div>
</div>
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,400i,700");
/* --- Стиль квадратного элемента --- */
#element {
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-origin: border-box;
background-image: url(https://images.unsplash.com/photo-1523217582562-09d0def993a6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
width: 240px;
height: 240px;
margin: 24px auto;
padding: 24px;
border: 16px solid rgba(255,255,255,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
/* --- Стиль остальных элементов --- */
body {
font-family: Inconsolata;
background-color: #f5f5f5;
text-align: center;
}
#container {
padding: 24px 0 0;
}
#inputs label {
margin: 8px;
}
#inputs label input {
margin-right: 4px;
vertical-align: top;
}
h3 {
font-size: 24px;
font-size: 20px;
font-weight: bold;
color: #39a1f4;
margin-top: 50%;
transform: translateY(-50%);
padding: 16px;
background: rgba(255,255,255,.9)
}
jQuery(document).ready(function($){
$('input').on('change', function(){
$('#element').css({
'background-origin': $(this).val()
})
});
});
This Pen doesn't use any external CSS resources.