<div class='demo'>CSS Coffee</div>
<div>
    <label>background-origin: </label>
    <select id='options'>
      <option>border-box</option>
      <option>padding-box</option>
      <option>content-box</option>
    </select>
  </div>

body {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 30px;
}

.demo {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 10px dotted rgb(10, 10, 10);
  color: rgb(240,240,240);
  background: url('https://images.unsplash.com/photo-1500259571355-332da5cb07aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzcyMDMyNDQ&ixlib=rb-4.0.3&q=80&w=200');
  background-origin: border-box;
  background-repeat: no-repeat;
}

document.querySelector('#options').addEventListener('input', (e) => {  
  document.querySelector('.demo').style.backgroundOrigin = e.target.value;
})