Baseblog theme with individual header image

Kirby 2 Solved ✅
1

Hi,

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.

2

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?

3

I want a background image in the header, so that the image is behind the string “Baseblog”.

4

You can add your background image via the stylesheet, for example:

.site-header {
  background-image: url(path/to/image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
5

Okay, thanks! Now it works!

6

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?

7

I don’t understand what you mean. Maybe you can post a screenshot?

Are you a complete beginner with HTML and CSS?

8

Here is a screenshot:

No, I have basic knowledge of HTML/CSS.

9

I think you have two options here:

  1. use the background image on the html root. element (will work, but not necessarily recommended)
  2. 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.

10

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.

11 
<body>
  <div class="wrapper">
    <!-- all the other elements -->
  </div>
</body>

The opening wrapper div would go into the header, the closing one into the footer.

12

Where I have to insert this html code?

13

I already said, in the header and in the footer. These are probably located in

/site/snippets/header.php and
/site/snippets/footer.php

respectively.

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?

14

Thanks, it works. Now I will read the Getting Started Guide a little bit.