Change the header image of every blog post

Illdy
1

Hello everyone!

Is there a way to change the header image of every blog post? Illdy just allow me to upload one or more but they change randomly :confused:

I actually would love to have a different header image on each on my post/sections (Frauen, Männer, Kinder and Wohnen) My website is I’m still learning CSS so if I have to change the code (that I’m sure I will) Could you please explain to me which code and where should I change it?

Thanks a lot!

Have a great day!

Liz

2

Hello! I already solve it with a plugin :slight_smile: But now I have another question:

I change the size of the headers too and made them smaller with this code:

body:not(.home) header#header {
height: 400px;
}
/*
site title move down page and size
*/

But now the text of the header is no longer centered like you could see here:

http://www.boholove.org/index.php/2019/12/26/kinder/

How can I move the text of the header so that it is centered again?

Thanks for your help!

3

Why are you using plugin, this can be done without a plugin, remember that, the more plugin you will use, the more slow website you will have.

4

Hey there

You can use this css to change title position:

#header .bottom-header.blog {
padding: 30px 0;
}

5

Hello Harry!

That’s for your answer. I didn’t know that it will get slower :confused: . Then I’m gonna need help there too, once again how can I edit every header image with code?

Thanks a lot!

6

Hallo Noda!

It worked! Thanks a lot! I would like to ask again for your help, with the first question I had: How can I edit every header image with code? I don’t wanna use a plugin anymore because it’s gonna make my website slower :confused:

Have a good day!

7

Hello Lizova

There is no such option to edit header images of a single post, once you set it from the settings it will appear for all your posts, this is possible only by custom CSS, but in this case, you have to create custom CSS for all your posts, for example:

.post-id-XX header#header {
position: relative;
background-image: url(http://www.boholove.org/wp-content/uploads/2019/12/shutterstock_1572415747-scaled.jpg);
background-attachment: fixed;
}

XX in this code is ID of the post

8

Thanks Noda! Where should I paste this code? on the Custom CSS?

Have a good day!

9

I mean the Additional CSS section :slight_smile:

10

Hey Lizova

Yes, in APpearance > customize > additional CSS, this is the default location of the custom CSS