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?
Add a comment
|
2 Answers
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/
answered Sep 1, 2018 at 15:56
-
Thank you, but no luck: background-image: url('alias('@web') }}/craft/templates/toxicomental/header.png'); Maybe did I not understand right? Commented Sep 1, 2018 at 16:20
-
Your image is at the totally wrong place. It should be in a subfolder of your
webdirectory. Assets in your template folder are not public. You can as well remove theurlfunction. Just do as I explained Commented 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? Commented 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. Commented 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 Commented Sep 1, 2018 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 Commented 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.– foamcowCommented Sep 1, 2018 at 21:32
-
No yours is a relative path/url, it will point to the url relative from the current one Commented 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?– foamcowCommented Sep 1, 2018 at 21:47