<p>There is a function called <code>alias</code> that returns a defined <a href="https://www.yiiframework.com/doc/guide/2.0/en/concept-aliases" rel="nofollow noreferrer">alias</a>. A default alias is <code>@web</code> and it represents your base url,</p>

<pre><code>background-image: {{ alias('@web') }}/path/to/image.jpg;
</code></pre>

<p>Would display the file <code>image.jpg</code> in <code>web/path/to/</code></p>

CC BY-SA 4.0
2018-09-01T16:20:12.710Z
Thank you, but no luck:

background-image: url('alias('@web') }}/craft/templates/toxicomental/header.png'); Maybe did I not understand right?
Toxico Mental
CC BY-SA 4.0
2018-09-01T16:28:54.337Z
Your image is at the totally wrong place. It should be in a subfolder of your `web` directory. Assets in your template folder are not public. You can as well remove the `url` function. Just do as I explained
Robin Schambach
CC BY-SA 4.0
2018-09-01T16:38:00.543Z
Thank you, it's working now. Although, I am wondering, is it the only way to use the background-image property? Can't I use assets?
Toxico Mental
CC BY-SA 4.0
2018-09-01T16:46:02.663Z
Found a satisfying solution: with header.png into the templates folder, renamed _header.png, #header { background-image: url(".header.png"); height: 150px; } works perfectly.
Toxico Mental
CC BY-SA 4.0
2018-09-01T17:01:16.687Z
And it will drain much more resources since Craft handles the request so if you are going to create a popular site it will slow down
Robin Schambach
CC BY-SA 4.0
2018-09-01T15:56:08.863Z
2018-09-01T15:56:08.863Z
Robin Schambach
<p>You don't <em>need</em> the domain part at all. Why not use </p>

<pre><code>background-image: /path/to/image.jpg;
</code></pre>

CC BY-SA 4.0
2018-09-01T20:08:57.873Z
Because it's much cleaner to use absolute paths in case he's going to move something
Robin Schambach
CC BY-SA 4.0
2018-09-01T21:32:55.073Z
Is that not an absolute path? It includes the root. No matter the domain it will always point to the right place.
foamcow
CC BY-SA 4.0
2018-09-01T21:43:54.370Z
No yours is a relative path/url, it will point to the url relative from the current one
Robin Schambach
CC BY-SA 4.0
2018-09-01T21:47:40.827Z
It points to the file from the web root. Though I guess it's Root Relative rather than absolute. So it's starting from the root, relative to the working directory right?
foamcow
CC BY-SA 4.0
2018-09-01T19:04:21.383Z
2018-09-01T19:04:21.383Z
foamcow
<p>My current code is:</p>

<pre><code>#header { background-image: url('{{ sitePath }}/assets/toxicomental/header.png'); height: 150px; }
</code></pre>

<p>Still, I don't get the image showing.</p>

<p>What do I do wrong?</p>

<assets><css>
background-image CSS property: how to do it right with Craft?
# background-image CSS property: how to do it right with Craft?

(Asked by: username_0 on 2018-09-01)

My current code is:
#header { background-image: url('{{ sitePath }}/assets/toxicomental/header.png'); height: 150px; }

Still, I don't get the image showing.
What do I do wrong?

**Tags:** assets, css

---

## 2 answers

### Answer by username_1 on 2018-09-01. Score: 3 | Accepted answer

There is a function called alias that returns a defined alias. A default alias is @web and it represents your base url,
background-image: {{ alias('@web') }}/path/to/image.jpg;

Would display the file image.jpg in web/path/to/

> **Comments:**
> **username_0**: Thank you, but no luck:  background-image: url('alias('@web') }}/craft/templates/toxicomental/header.png'); Maybe did I not understand right?  
> **username_1**: Your image is at the totally wrong place. It should be in a subfolder of your `web` directory. Assets in your template folder are not public. You can as well remove the `url` function. Just do as I explained  
> **username_0**: Thank you, it's working now. Although, I am wondering, is it the only way to use the background-image property? Can't I use assets?  
> **username_0**: Found a satisfying solution: with header.png into the templates folder, renamed _header.png, #header { background-image: url(".header.png"); height: 150px; } works perfectly.  
> **username_1**: And it will drain much more resources since Craft handles the request so if you are going to create a popular site it will slow down  

---

### Answer by username_2 on 2018-09-01. Score: 1

You don't need the domain part at all. Why not use 
background-image: /path/to/image.jpg;

> **Comments:**
> **username_1**: Because it's much cleaner to use absolute paths in case he's going to move something  
> **username_2**: Is that not an absolute path? It includes the root. No matter the domain it will always point to the right place.  
> **username_1**: No yours is a relative path/url, it will point to the url relative from the current one  
> **username_2**: It points to the file from the web root. Though I guess it's Root Relative rather than absolute. So it's starting from the root, relative to the working directory right?  

---

