Answers.Body: <p>Try taking the apostrophes off your transform, e.g.</p>
  
  <pre><code>getUrl(storyMediaTransform)
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-01-15T13:27:30.583Z
Answers.LastActivityDate: 2016-01-15T13:27:30.583Z
Answers.UserDisplayName: Ian Ebden
Body: <p>In my backend I have a radio button field with 2 options for the client:
  <strong>Normal</strong> and <strong>cover</strong>. When selecting normal, the uploaded image is put into an  tag in the HTML and an image transform is applied. This works well as it should.</p>
  
  <p>When selecting cover however, the uploaded image is added to a background-image inline CSS style. But the applied image transform is not generated for this. When I change the uploaded image to "normal", let it generate a transform and then put it back to "cover" only than it is shown as a background image.</p>
  
  <p>So image transform doesn't seem to trigger in this code:</p>
  
  <pre><code>&lt;div style="background-image: url('{{ block.mediaImageFile.first().getUrl('storyMediaTransform') }}'); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Does anyone know why this is not working?</p>
  
Tags: <image-transforms><css>
Title: Image transform in inline background css not being generated
ThreadText: # Image transform in inline background css not being generated
  
  (Asked by: username_0 on 2016-01-15)
  
  In my backend I have a radio button field with 2 options for the client:
  **Normal** and **cover**. When selecting normal, the uploaded image is put into an tag in the HTML and an image transform is applied. This works well as it should.
  
  When selecting cover however, the uploaded image is added to a background-image inline CSS style. But the applied image transform is not generated for this. When I change the uploaded image to "normal", let it generate a transform and then put it back to "cover" only than it is shown as a background image.
  
  So image transform doesn't seem to trigger in this code:
  
  ```
  <div style="background-image: url('{{ block.mediaImageFile.first().getUrl('storyMediaTransform') }}'); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%;"></div>
  
  ```
  
  Does anyone know why this is not working?
  
  **Tags:** image-transforms, css
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-01-15. Score: 1 | Accepted answer
  
  Try taking the apostrophes off your transform, e.g.
  
  ```
  getUrl(storyMediaTransform)
  
  ```
  
  
  ---
  
  