1

I'm struggling to add additional background styles using ng-style. The idea of what I am trying to do is make a grid of speakers using ng-repeat, each grid element having it's own image of a speaker. This is fine, except that I want the images to be a background, and while I can successfully get the image to reflect I can't add the css for background-position & background-size. The basics of what I am doing is here, but the issue is I've tried using inline styles unsuccessfully:

CODE:

<div class="grid" ng-repeat="speaker in home.speakers">
   <div class="grid-image" ng-style="{'background':'url({{speaker.img}})' 'center center' '/' 'cover'}"></div>
   <span class="caption"><h3>{{speaker.name}}</h3></span>
</div>

I've played with the single quotes every imaginable way, but still get the console error that it has no idea what I am trying to do. I've also tried just setting background size and background position in a separate class, but this doesn't work because the image isn't declared with it. I really am at a loss here, though I would assume I wouldn't be the first to try this, I'm just finding nothing helpful on it.

Community
  • 1
  • 1
Nathan Lykke
  • 71
  • 1
  • 11

1 Answers1

5

because you are using background-image and applying the shorthand for background, so here:

ng-style="{'background-image':'url({{speaker.img}})' 'center center' '/' 'cover'}">

change to:

ng-style="{'background-image':'url({{speaker.img}})', 'background-position': 'center center', 'background-size': 'cover'}">
dippas
  • 58,591
  • 15
  • 114
  • 126
  • Yep I agree. Here an example: [Example](http://codepen.io/grimaldello/pen/MKPMaO?editors=1011) – ronIDX Feb 07 '16 at 23:49
  • You're right about the `background-image`, I accidentally put that in the question, the code you gave me worked like a charm, but is there a way to get shorthand to work, or do I have to define each style as you did in your answer? Also, do you know why I can't use a class that defines position and size and declare JUST the image with ng-style? – Nathan Lykke Feb 08 '16 at 03:29
  • I'm no expert in AngularJS, but take a look at [this](http://jaketrent.com/post/ngstyle-background/) see if helps you – dippas Feb 08 '16 at 12:47