image in circle

by ostapische

HTML

<script src="http://ostapische.ru/PIE_IE678.js"></script>
<div class="holder">
    <div class="image"></div>
</div>

CSS

body{
    background-color: #333333;
}
div.holder {
    margin: 5px;
    width: 150px;
    height: 150px;
    max-width: 150px;
    max-height: 150px;
    border-radius: 150px;
    background-color: #eeeeee;
}
div.image {
    width: 100%;
    height: 100%;
    
    background: url('http://habrastorage.org/storage2/43f/497/d66/43f497d66e2cf86f84e40813ed7e1678.png') scroll no-repeat center content-box;
    background-size: cover;
    
    -pie-background: url('http://habrastorage.org/storage2/43f/497/d66/43f497d66e2cf86f84e40813ed7e1678.png') scroll no-repeat center / cover content-box;
    
    border-radius: 150px;
}

JavaScript

// can't use PIE.htc on jsfiddle
$(function() {
    if (window.PIE) {
        $('div').each(function() {
            PIE.attach(this);
        });
    }
});