Log in Sign up

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   Edit 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 · Edit 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 · Edit answer