<div class="inputs">
<input checked id="background-origin" name="background" type="radio"/>
<label for="background-origin">background-origin: padding-box</label>
<br>
<input id="background-clip" name="background" type="radio"/>
<label for="background-clip">background-clip: padding-box</label>
</div>
<div class="result"></div>
.result {
box-sizing: border-box;
height: 300px;
width: 300px;
background: url('//lorempixel.com/400/400/nightlife/4') no-repeat;
border: 16px solid rgba(23,23,23,0.5);
/* background-size: cover; */
padding: 16px;
margin: 0 auto;
}
.inputs {
margin:0 auto 8px;
width:300px;
label {
cursor: pointer;
padding: 12px 0;
}
input {
cursor: pointer;
margin-left: 12px;
}
}
var $box = $('.result');
$('.inputs').find('input').on('change', function() {
$box.css('background-origin', 'initial');
$box.css('background-clip', 'initial');
$box.css($(this).attr('id'), 'padding-box');
});
This Pen doesn't use any external CSS resources.