Adding a background image using "ng-style" in AngularJS

Question

It seems I can not use the controller to set the CSS background property for the 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 also tried to reproduce this setting in Fiddle here . Does anyone have any ideas?

Answer 1

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

background-image requires url() to work.

Answer 2

AngularJS is now suppoorts ng-style .

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

Answer 3

You need to use the css' url() function for background images, for example:

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

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