1

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?

2 Answers 2

3

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/

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

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

background-image: /path/to/image.jpg;
4
  • Because it's much cleaner to use absolute paths in case he's going to move something Sep 1, 2018 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, 2018 at 21:32
  • No yours is a relative path/url, it will point to the url relative from the current one Sep 1, 2018 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, 2018 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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