<aside>
  <label for="border-box">
    <input type="radio" name='origin' id="border-box">
      background-origin: border-box;
  </label>
  <label for="padding-box">
    <input type="radio" name='origin' id="padding-box" checked>
      background-origin: padding-box;
  </label>
  <label for="content-box">
    <input type="radio" name='origin' id="content-box">
      background-origin: content-box;
  </label>
</aside>
<main class='border'>
  <p>background-origin: <span id='type'>padding-box;</span></p>
</main>

main
  width 400px
  height 400px
  font-size 30px
  color #fff
  font-weight bold
  padding 20px
  border 20px dashed #333;
  background url(https://yogwang.site/img/userimg.jpg) center no-repeat
  background-position 0 0
  box-sizing border-box
  &.border-box
    background-origin border-box
  &.padding-box
    background-origin padding-box
  &.content-box
    background-origin content-box
aside
  width 300px
  margin-right 20px
  label
    padding 25px 0
    border red 4px solid 
    margin-bottom 20px
    display block
    cursor pointer
body
  width 720px
  margin 30px auto
  display flex

$('input').click(function(){
  const type=$(this).attr('id')
  $('main').removeClass().addClass(type)
  $('#type').text(type)
})