Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T16:20:12.710Z
Answers.Text: Thank you, but no luck:
  
  background-image: url('alias('@web') }}/craft/templates/toxicomental/header.png'); Maybe did I not understand right?
Answers.UserDisplayName: Toxico Mental
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T16:28:54.337Z
Answers.Text: 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
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T16:38:00.543Z
Answers.Text: 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?
Answers.UserDisplayName: Toxico Mental
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T16:46:02.663Z
Answers.Text: Found a satisfying solution: with header.png into the templates folder, renamed _header.png, #header { background-image: url(".header.png"); height: 150px; } works perfectly.
Answers.UserDisplayName: Toxico Mental
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T17:01:16.687Z
Answers.Text: 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
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T15:56:08.863Z
Answers.LastActivityDate: 2018-09-01T15:56:08.863Z
Answers.UserDisplayName: Robin Schambach
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T20:08:57.873Z
Answers.Text: Because it's much cleaner to use absolute paths in case he's going to move something
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T21:32:55.073Z
Answers.Text: Is that not an absolute path? It includes the root. No matter the domain it will always point to the right place.
Answers.UserDisplayName: foamcow
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T21:43:54.370Z
Answers.Text: No yours is a relative path/url, it will point to the url relative from the current one
Answers.UserDisplayName: Robin Schambach
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T21:47:40.827Z
Answers.Text: 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?
Answers.UserDisplayName: foamcow
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-09-01T19:04:21.383Z
Answers.LastActivityDate: 2018-09-01T19:04:21.383Z
Answers.UserDisplayName: foamcow
Body: <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>
  
Tags: <assets><css>
Title: background-image CSS property: how to do it right with Craft?
ThreadText: # 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/username_0/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](https://www.yiiframework.com/doc/guide/2.0/en/concept-aliases). 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/username_0/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?  
  
  ---
  
  