I’m new to kirby and I have just installed the kirby starterkit with the theme “Baseblog”. Now I want to know how I can add an image at the header of each page? Perhaps this is a simple question, but I found no solution.
I hope someone can help me.
Where exactly do you want to add the image? Do you mean a logo instead of the “Baseblog” string? Or a background image in the header?
I want a background image in the header, so that the image is behind the string “Baseblog”.
You can add your background image via the stylesheet, for example:
background-position: center center;
Okay, thanks! Now it works!
I still have a question. I added now an image as a background image of the whole page. But now the posts of the blog are a littel bit unreadable because the text of the posts are transparent. How can I change the background of the blog posts so that the posts are no more transparent?
I don’t understand what you mean. Maybe you can post a screenshot?
Are you a complete beginner with HTML and CSS?
Here is a screenshot:
No, I have basic knowledge of HTML/CSS.
I think you have two options here:
- use the background image on the html root. element (will work, but not necessarily recommended)
- use the background image on the body and use another wrapper element around the rest of the HTML.
Please keep in mind that this is all general HTML/CSS knowledge and this forum is mainly intended for Kirby related questions.
Thanks for your help. Can you explain the second option a little bit more? How can I create a wrapper element around the rest of the html?
This will be my last question regarding HTML/CSS.
<!-- all the other elements -->
The opening wrapper div would go into the header, the closing one into the footer.
Where I have to insert this html code?
I already said, in the header and in the footer. These are probably located in
May I suggest that you read at least the Getting Started Guide in the documentation to get a feeling for Kirby and where to find what?
Thanks, it works. Now I will read the Getting Started Guide a little bit.