<p>You can simply add it inline to your <code>body</code> tag like so:</p>

<pre><code>&lt;body style="background-image: url({{ myGlobal.myAssetsField.first().url }})"&gt;
</code></pre>

<p>If you want to only use it with selected templates, you'd better use Craft's <a href="http://buildwithcraft.com/docs/templating/includecss" rel="nofollow"><code>includeCss</code></a> tag:</p>

<pre><code>{% set bodyCss %}
    .myBodyClass {
        background-image: url({{ myGlobal.myAssetsField.first().url }});
    }
{% endset %}

{% includeCss bodyCss %}
</code></pre>

CC BY-SA 3.0
2014-12-15T11:13:16.257Z
2014-12-15T11:13:16.257Z
carlcs
<p>How do you enable a user to upload a css background Image?</p>

<p>Do you write some inline css in the page header with twig markup?
Do you write some twig markup inside a css file?</p>

<p>Or do you fake a background image by add an image and then position it absolute?</p>

<p>What's the best practice there?</p>

<best-practice><css><frontend>
Enable the user to upload background Image
# Enable the user to upload background Image

(Asked by: username_0 on 2014-12-15)

How do you enable a user to upload a css background Image?

Do you write some inline css in the page header with twig markup?
Do you write some twig markup inside a css file?

Or do you fake a background image by add an image and then position it absolute?

What's the best practice there?

**Tags:** best-practice, css, frontend


---

## 1 answers

### Answer by username_1 on 2014-12-15. Score: 4 | Accepted answer

You can simply add it inline to your body tag like so:


If you want to only use it with selected templates, you'd better use Craft's includeCss tag:
{% set bodyCss %}
    .myBodyClass {
        background-image: url({{ myGlobal.myAssetsField.first().url }});
    }
{% endset %}

{% includeCss bodyCss %}


---

