AngularJS - Static Background Image Directive

HTML

<div ng-app="myApp">

        <div class="tall" my-background-image="https://blackwell-dev.s3.amazonaws.com/collaboration/201812/efd49f99-239d-43a0-8e17-da42e7610788?AWSAccessKeyId=AKIAI4BPQ7I4ZNJCZP6A&Expires=1545846542&Signature=%2BF3EzpRTFeDF%2F3jhPEfuvfzrt1U%3D"></div>

</div>

CSS

div.wide {
    width: 200px;
    height: 100px;
    border: 1px solid orange;
}
div.tall {
    width: 100px;
    height: 200px;
    border: 1px solid orange;
}

JavaScript

angular.
    module('myApp', []).
    directive('myBackgroundImage', function () {
        return function (scope, element, attrs) {
            element.css({
                'background-image': 'url(' + attrs.myBackgroundImage + ')',
                    'background-size': 'cover',
                    'background-repeat': 'no-repeat',
                    'background-position': 'center center'
            });
        };
    });