title: AnguIarJS: how do I edit a single background image to have a different background size than the rest
body: <p>I am editing a couple of webpages. Each page has a main background image that is set to the size "cover"</p>
  
  <p>HTML: (main file)</p>
  
  <pre><code>&lt;div id="main-content" class="main-content"&gt;
  &lt;div class="main-content__main-image" ng-if="settings['mainImage'] !== 
  null"&gt;
  &lt;style ng-if="settings['mainImageText']"&gt;
  .main-content__mainImage {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url({{ 
  settings["mainImage"] }}) top no-repeat;
  background-size: cover;
  background-position-y: 50%;
  }
  &lt;/style&gt;
  &lt;style ng-if="!settings['mainImageText']"&gt;
  .main-content__mainImage {
  background: url({{ settings["mainImage"] }}) top no-repeat;
  background-size: cover;
  background-position-y: 50%;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>in the JS file, the main images for each page are generated like this:</p>
  
  <pre><code>App.controller("historyCtrl", function($scope) {
  $scope.applySettings({
  theHeader: "Our History",
  theTitle: "Our History",
  mainImage: "picture01.jpg",  
  mainImageText: "",  
  section: [
  //etc
  </code></pre>
  
  <p>For every controller, the main image is fixed to the "cover" size since that is the template. However, some of the pictures are too big/small and I want to use the CSS "contain" background-size property. Ex:</p>
  
  <pre><code>background-size: contain;
  </code></pre>
  
  <p>How do I do this without changing the rest of the pictures being set as 'cover' ?</p>