Adding background image with 'ng-style' in AngularJS

Question

I seem unable to use a controller to set the CSS background property of a div. Here is my code so far, as per the documentation:

HTML:

<div class="hero" ng-controller="HeroCtrl" ng-style="heroImage"></div>

JS:

'use strict';

angular.module('AppliedSiteApp').controller('HeroCtrl', function ($scope) {

    $scope.heroImage = {
        background: 'images/brick.jpg'
    };

    console.log($scope.heroImage);

});

CSS:

.hero {
    width: 100%;
    min-height: 350px;
    background-position: center center;
}

I have also tried to replicate this setup in a Fiddle here. Does anyone have any ideas?

score 8 · Accepted Answer · answered Aug 28 '13 at 10:17

8

$scope.heroImage = {
    background: 'url(images/brick.jpg)'
};

background-image requires url() to work.

answered Aug 28 '13 at 10:17

Umur Kontacı

35,403
8
73
96

score 3 · Answer 2 · answered Aug 28 '13 at 10:17

3

You need to use css' url() function for background images , like this:

'background-image': 'url(https://i.stack.imgur.com/mfvI9.jpg)'

Plunker: http://plnkr.co/edit/PFUY0w?p=preview

answered Aug 28 '13 at 10:17

Ivan Chernykh

41,617
13
134
146

1

To use with a dynamic data you should do ng-style="{ 'background-image': 'url(' + data.url + ')' }"> – Eric Douglas Jun 03 '16 at 13:10

score 3 · Answer 3 · answered Feb 05 '14 at 08:55

3

AngularJS now suppoorts ng-style.

So now you can use ng-style="{ backgroundImage: variableInScope + '/some/string' }"

answered Feb 05 '14 at 08:55

e382df99a7950919789725ceeec126

5,751
4
31
56

Adding background image with 'ng-style' in AngularJS

3 Answers3