Simple example to illustrate Angular directive

angular-directive-example.md

// Set image as background of a div element using CSS
.fill-bg {
  background-img: url('MYURLHERE');
  background-size : 'cover';
  background-repeat : 'no-repeat';
  background-position : 'center center';
}

/* Automate the above process using jquery, so that
 * designers don't have to write separate CSS class for each image 
 * Add cover-background-image to some <div> to set their background
 */
$('div[cover-background-image]').each(function(i, el) {
  $(element).css({
    'background-image': 'url()',
    'background-size' : 'cover',
    'background-repeat' : 'no-repeat',
    'background-position' : 'center center'
  });
});

// Angular directive module
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'
      });
    };
  });

Source