javascript - background image isn't showed with the creation of the directive -

this directive

(function() {   'use strict';    angular     .module('app')     .directive('backgroundimage', background);      function background () {       return function (scope, element, attrs) {         scope.$watch(attrs.backgroundimage, function(value) {           element.css({             'background-image': 'url(https://example.com/' + value + '.jpg)',             'background-repeat': 'no-repeat',             'background-position': 'center center',             'background-attachment': 'fixed',             '-webkit-background-size': 'cover',             '-moz-background-size': 'cover',             '-o-background-size': 'cover',             'background-size': 'cover'           });         });       };     } }()); 

which call view following code

<div background-image="id"></div> 

my issue despite image has been loaded correctly isn't showed view. have idea?

you need provide height well, in order background image visible, width if needed. since there no content inside div @ 0 height. div being block element take full width of container if not specific width mentioned.

example:

      element.css({         'background-image': 'url(https://example.com/' + value + '.jpg)',         'background-repeat': 'no-repeat',         'background-position': 'center center',         'background-attachment': 'fixed',         '-webkit-background-size': 'cover',         '-moz-background-size': 'cover',         '-o-background-size': 'cover',         'background-size': 'cover',         'height' :'200px'       }); 

set height , width via css if have preset one. if need make flexible calculate height , width creating temp image object.

scope.$watch(attrs.backgroundimage, function(value) {         var url = 'https://example.com/' + value + '.jpg';          getimagedimensions(url).then(function(dimobj) {            element.css({             'background-image': 'url(' + url + ')',             'background-repeat': 'no-repeat',             'background-position': 'center center',             height: dimobj.height,             width: dimobj.width           });         })       });        function getimagedimensions(url) {         var defer = $q.defer();         var img = new image();          img.onload = function() {            defer.resolve({height: img.height + 'px', width:img.width + 'px'});           img = null;         }          img.onerror = function(){           defer.reject("ivalid url");           img = null;         }          img.src = url;         return defer.promise;       }     };   }