Image url in css theme

1

Hi,
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

2

hi,

{% if page.header.header_image %}
{% set style = ’ style=“background-image: url('’ ~ page.media.images[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.

3

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

4

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

5

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

6

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

7

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

8

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

9

and which should work?
/images/xy.jpg
or
images/xy.jpg
?

10

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

11

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

12
13

scss too?

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

14

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