Exemple de code de la propriété JS / CSS backgroundOrigin.

<style>
.cadre-gris { margin: 5px 0; }
.fg{  height : 150px; background-repeat :no-repeat; }
.fgs{ background-image: url(/images/exemple/filter-image.jpg) }
.fgd{ background-image: url(/images/exemple/grille150.gif), url(/images/exemple/filter-image.jpg); }
.padding { padding:15px; }
.bordure { border:10px dotted #000; }
</style>
<div class="cadre-exemple cadre-clickme" id="exemple">
    <h3 id="exemple-desc">Valeur par défaut</h3>
    <div class="cadre-gris">
        <span id="exemple-desc-0">Valeur initiale de backgroundOrigin</span>
        <p id="exemple-style-0" class="bordure padding  fg fgs"> Effet backgroundOrigin.</p>
    </div>
</div>
<div class="cadre-exemple cadre-clickme" id="exemple1">
    <h3 id="exemple-desc1">Valeur par défaut</h3>
    <div class="cadre-gris">
        <span id="exemple-desc-01">Valeur initiale de backgroundOrigin</span>
        <p id="exemple-style-01" class="bordure padding  fg fgd"> Effet backgroundOrigin.</p>
    </div>
</div>
<script>
initExemple('background-origin', 'backgroundOrigin', ['border-box', 'content-box', 'padding-box'], 1); 
initExemple('background-origin', 'backgroundOrigin', ['border-box, padding-box', 'content-box, border-box', 'padding-box , content-box'], 1, 1); 
</script>