Image url in css theme

this could be asked many times but didn’t find… sorry about that.
I inherited quark theme and in my custom theme want to set background image for a page.
In my theme i have images folder with my xy.jpg image, in my css/custom.css i tried to set:
background-image: url(‘images/xy.jpg’);
background-image: url(‘/images/xy.jpg’);
background-image: url(‘theme://images/xy.jpg’);
background-image: url(‘{{theme://images/xy.jpg}}’);

non of these works. The only one that works is
background-image: url(‘…/images/xy.jpg’);

but i prefer something without relative path

is this available?

Many thanks


{% if page.header.header_image %}
{% set style = ’ style=“background-image: url('’ ~[page.header.header_image].cache.url() ~ '')”’ %}
{% elseif theme_config.default_header_image %}
{% set style = ’ style=“background-image: url('’ ~ url(‘theme://img/’ ~ theme_config.default_header_image) ~ '')”’ %}
{% else %}
{% set style = ‘’ %}
{% endif %}

it’s work, my environtment using windows 10 with laragon.

yes, this work in twig file, but not in css file. I have a css

This must work if /images is on your web root. Eg. if image is at and CSS is at, then url('/some/stuff/images/image.jpg') must work

thank you @Karmalakas , but images is in my theme’s path as css too:
i thought in css something like
background-image: url(‘images/xy.jpg’);
should work, but it’s not…

So doesn’t url('/user/themes/mytheme/images/xy.jpg') work?

did not try, but theme should have some shortcut to find resources inside theme, isn’it?

It does… On server side (PHP, Twig). CSS is processed on client side and PHP streams or Twig vars won’t work there

and which should work?

/ means path is from web root. Without - path is from css location

i know, i thought grav or webserver knows how to interpret that url. Twig variables don’t work in scss too?

scss too?

DON’TCARETHISi must type more than 20 chars, so here it is…DONTCARETHIS

I really doubt any SCSS/SASS compiler supports Twig. And I don’t really see how it would. Unless you’re compiling to CSS on every single page load, so that it could check variables and use them.

1 Like