imgtobg

by Mayank Dixit

HTML

<div ng-init class="profile-image-container">
    <imgtobg class="profile-image" back-img="http://dnfey6ivm608d.cloudfront.net/pp/e252e9141f6c8237d990fe77d22a0288-o.jpg" />
 </div>

CSS

.profile-image {
    width: 100%;
    height: 100%;
    position: absolute;
}
.profile-image-container{
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
}

JavaScript

angular.module("myApp", [])
.directive('imgtobg', function() {
    return {
        restrict: 'AE',
        link: function(scope, elem, attr) {
            attr.$observe('backImg', function(value) {
                elem.css({
                    'background-image': 'url(' + value +')',
                    'background-size' : 'cover'
                });
            });
        }
    }
})