Problem with custom CSS / art-directed pages

Kirby 3 Solved ✅
1

Hi there,
I just implemented custom CSS for pages, as described in this article: https://getkirby.com/docs/cookbook/templating/art-directed-blog-posts.
It worked as expected, only problem where the image URLs. When CSS is in the assets folder I just have to refer to them like this:

image: url('../img/image.jpg')

Now that the CSS is in the page folder within the content folder, I thought it worked like this:

image: url('../../assets/img/image.jpg')

I took me some time to find out that the CSS from the page folder is moved deep donw into the media folder, creating a link like:

image: url('../../../../assets/img/image.jpg')

This doesn’t look very convenient, also, the article doesn’t mention this.
Am I missing something here?

2

You can use an absolute link, rather than relative to the page. This will work on any page, regardless of depth:

image: url('/assets/img/image.jpg')
3

Ah, of course! Thank you :slight_smile: