CSS3 background origin

by Mohammed Ismail Ansari

HTML

<div id="one" class="my-divs">
    
</div>
<div id="two" class="my-divs">
    
</div>
<div id="three" class="my-divs">
    
</div>

CSS

.my-divs
{
    width: 200px;
    height: 150px;
    padding: 50px;
    margin: 10px;
    border: 5px solid Black;
    background: url('http://www.google.co.in/images/srpr/logo4w.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

div#one
{
    background-origin: content-box;
}

div#two
{
    background-origin: padding-box;
}

div#three
{
    background-origin: border-box;
}

JavaScript

// CSS3 background origin