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?


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/

  • Thank you, but no luck: background-image: url('alias('@web') }}/craft/templates/toxicomental/header.png'); Maybe did I not understand right? – Toxico Mental Sep 1 '18 at 16:20
  • 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 Sep 1 '18 at 16:28
  • 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 Sep 1 '18 at 16:38
  • 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 Sep 1 '18 at 16:46
  • 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 Sep 1 '18 at 17:01

You don't need the domain part at all. Why not use

background-image: /path/to/image.jpg;
  • Because it's much cleaner to use absolute paths in case he's going to move something – Robin Schambach Sep 1 '18 at 20:08
  • Is that not an absolute path? It includes the root. No matter the domain it will always point to the right place. – foamcow Sep 1 '18 at 21:32
  • No yours is a relative path/url, it will point to the url relative from the current one – Robin Schambach Sep 1 '18 at 21:43
  • 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 Sep 1 '18 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.