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?

Umur Kontacı · Accepted Answer · 2013-08-28 10:17:19Z

8

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

background-image requires url() to work.

answered Aug 28, 2013 at 10:17

Umur Kontacı

35.5k8 gold badges76 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Chernykh · Accepted Answer · 2013-08-28 10:17:26Z

3

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

'background-image': 'url(https://i.sstatic.net/mfvI9.jpg)'

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

answered Aug 28, 2013 at 10:17

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

1 Comment

Eric Douglas Over a year ago

To use with a dynamic data you should do ng-style="{ 'background-image': 'url(' + data.url + ')' }">

e382df99a7950919789725ceeec126 · Accepted Answer · 2014-02-05 08:55:36Z

3

AngularJS now suppoorts ng-style.

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

answered Feb 5, 2014 at 8:55

e382df99a7950919789725ceeec126

6,0215 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

Adding background image with 'ng-style' in AngularJS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related