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