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