title: angular, background image and background position
body: <p>I'm struggling to add additional <code>background</code> styles using <code>ng-style</code>. The idea of what I am trying to do is make a grid of speakers using <code>ng-repeat</code>, each grid element having it's own image of a speaker. This is fine, except that I want the images to be a <code>background</code>, and while I can successfully get the image to reflect I can't add the css for <code>background-position</code> &amp; <code>background-size</code>. The basics of what I am doing is <a href="https://stackoverflow.com/questions/17252546/angularjs-ng-style-background-image-isnt-working">here</a>, but the issue is I've tried using inline styles unsuccessfully:</p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>&lt;div class="grid" ng-repeat="speaker in home.speakers"&gt;
     &lt;div class="grid-image" ng-style="{'background':'url({{speaker.img}})' 'center center' '/' 'cover'}"&gt;&lt;/div&gt;
     &lt;span class="caption"&gt;&lt;h3&gt;{{speaker.name}}&lt;/h3&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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 <code>background size</code> and <code>background position</code> 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.</p>