Answers.Body: <p>If you need the background image to be dynamic and controlled by the client then I would recommend using inline CSS in the template to set the image path. The rest of the required CSS can be in the CSS file itself.</p>
  
  <p>e.g.,</p>
  
  <pre><code>&lt;div style="background-image: url('{{ entry.image.first().getUrl('transformName') }}')" class="thing" ... &gt;
  </code></pre>
  
  <p>Your CSS file could even have a fallback background-url
  and in your CSS</p>
  
  <pre><code>.thing { background-size: cover; ... }
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-13T11:16:18.740Z
Answers.LastActivityDate: 2015-10-13T11:16:18.740Z
Answers.UserDisplayName: Matt Wilcox
Body: <p>I started working on Craft today. I want to display a background CSS image by adding a rule.</p>
  
  <p>Should I manually copy the file in <code>assets</code> folder or there's some way to upload and refer it on page.</p>
  
Tags: <templating>
Title: How to display picture
ThreadText: # How to display picture
  
  (Asked by: username_0 on 2015-10-13)
  
  I started working on Craft today. I want to display a background CSS image by adding a rule.
  
  Should I manually copy the file in `assets` folder or there's some way to upload and refer it on page.
  
  **Tags:** templating
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2015-10-13. Score: 3
  
  If you need the background image to be dynamic and controlled by the client then I would recommend using inline CSS in the template to set the image path. The rest of the required CSS can be in the CSS file itself.
  
  e.g.,
  
  ```
  <div style="background-image: url('{{ entry.image.first().getUrl('transformName') }}')" class="thing" ... >
  
  ```
  
  Your CSS file could even have a fallback background-url
  and in your CSS
  
  ```
  .thing { background-size: cover; ... }
  
  ```
  
  
  ---
  
  