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.
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 answerThanks 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