One header per each pages

Shapely
1

First of all : congratulation for this great Theme !

I need to have one dedicated header picture for each page of my website.
How can I do that please ?

Thanks in advance !

2

hi there

Thanks :slight_smile:

Please provide example of the page, link to the image and reference of where exactly you want that image

3

Hi Colorlib Hero

here’s the link : Accompagnement – Emilie Cottam
on this page (menu) there’s allway the same picture…

It’s about the blue picture on the header.
We need one dedicated picture per page (menu)
picture1.jpg for “portrait” page
picture2.jpg for “accompagnement” page
picture3.jpg for “formules” page

etc…

can you help us ?

Thanks in advance !
Bekir

4

Hi Bekir

Yes, this is possible by custom css code, here it is:

.page-id-XX .header-image-bg {
background-image: url(http://emiliecottam.com/wp-content/uploads/2021/12/cropped-mirror-infinite-space-fisheye-2.jpg);
}

In this code you need to change XX, it is a page ID, and here is how to find it: How to Find Your WordPress Page ID and Post ID (And What You Can Do With Them) | Elegant Themes Blog
and you need to change the link to the image for each page

Hope this helps

5

Hello Colorlib Hero (again)

Thanks for this code. I’ve tried it on this page with ID 56 but it’s seems not working, am I wrong somewhere ?
http://emiliecottam.com/index.php/portrait/

I’ve the same blue picture than on the link in your css code

when I refresh I have the random pictures of the lead Header.

Thanks for your skills !
Bekir

6

Hi Bekir

Your code is Invalid, check this out: Monosnap

7

Hi Colorlib Hero !

Ok, I juste forgot the } at the end of your CSS code.

The next code is for 100% large screening of block widgets, this last one works but I still not have specific background image for the header of this page, don’t know why ?

http://emiliecottam.com/index.php/portrait/

Do you understand ?

Thanks again :wink:
Bekir

8

Hi Bekir

No worries, just add !important to your code, like this:

.page-id-56 .header-image-bg {
    background-image: url(http://emiliecottam.com/wp-content/uploads/2021/12/cropped-mirror-infinite-space-fisheye-2.jpg) !important;
}
9

Great ! it works very fine !
Thank you very much Colorlib Hero :wink:
This post can be closed and usefull very everybody.

10

That’s great

Thank you too and have a nice day