Questions Where to put and how to reference images used in the templates or in the CSS?

Where to put and how to reference images used in the templates or in the CSS?

I try to use some small PNG images in the template or better in the CSS.

In the CSS file I try something like this:

.icon-cat-kickbike {
    font-size: 24px;
    padding:0 16px 0 0; 
    background-image: url('_scooter.png') no-repeat right center; 
}

But regardless whether I put the image in my Posts folder or in my template folder (copy-of-scroll), the image is never displayed.

Do I have to register the image somehow so that it can be used as an asset?

PS: I check rendering on the template preview (URL like https://preview-of-...-on-...blot.im) if that matters.

2 years ago, 2 replies Improve this question

That will only work if the CSS is in the same folder as the image. I recommend using an absolute path to the image instead, with your blog's folder as root. Let's say that _scooter.png was inside a directory called files, in your blog folder. Then this would work:

...
    background-image: url('/files/_scooter.png') no-repeat right center; 
...

Please note this issue is not specific to Blot. I recommend doing some more reading about how paths work in web browsers. MDN has a good guide to dealing with files.

I recognise this might all be complicated but Blot follows general computing standards for relative and absolute paths and knowledge gained here will apply elsewhere

Answered 2 years ago · Improve this answer

Thanks for the details!

Relative image paths don't work for me from the CSS, sorry.

But putting the image in a top folder and referencing it via an absolute path as you suggest does the trick.

Answered 2 years ago · Improve this answer