<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>

CC BY-SA 3.0
2015-10-13T11:16:18.740Z
2015-10-13T11:16:18.740Z
Matt Wilcox
<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>

<templating>
How to display picture
# 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.,


Your CSS file could even have a fallback background-url
and in your CSS
.thing { background-size: cover; ... }


---

