Adding background image with AngularJS using `background-image`

Question

I am trying to add a background image to my ionic app but not able to figure out how.

My codepen is given here

My HTML is given below

<body>
<div ng-controller="ImageController">
<div ng-style="{'background-image':'url({{images}})'}" style="height: 100px"></div>  
</div>

My JS is given below

  angular.module('starter.controllers', [])
  .controller("ImageController", function($scope){
  console.log("Hi there")
  $scope.images= "http://31.media.tumblr.com/bc0ea7c5f95701bff499f78b59d23e68/tumblr_mr74z9Lt3O1rs0z5go1_500.jpg"
});

Expected behavior: the image should span the background entirely.

Current behavior: A blank screen exists instead of the image

score 0 · Answer 1 · edited May 23 '17 at 11:46

app.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        element.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
});

try your own directive

<div back-img="<some-image-url>" ></div>

Look this also, I found solution here: angularjs: ng-src equivalent for background-image:url(...)

score 0 · Answer 2 · answered Feb 28 '17 at 13:16

0

Try

<div ng-style="{'background-image':'url('+images+')'}" style="height: 100px"></div>

answered Feb 28 '17 at 13:16

Johannes Reuter

3,501
19
20

updated codepen with the `div`. does not seem to work – lordlabakdas Feb 28 '17 at 13:18
@lordlabakdas Your codepen is broken, don't use a dot in the module-name and both methods (yours and my suggested one) work: http://codepen.io/anon/pen/LWpWvv?editors=1111 – Johannes Reuter Feb 28 '17 at 13:21

Adding background image with AngularJS using `background-image`

2 Answers2