Header Image
-
Hello There,
Is it possible to have different header images for different pages?
Thanks
-
Hi @alekmisjen,
First, you need to find the specific page ID number on the page which you want to apply the custom header image.
To discover the page id, please follow the steps below:
1. Navigate in your browser to the page you want to work with.
2. Right-click on that page (anywhere) and select “Inspect Element“.
3. Search inside the site’s markup for the body tag. It should be one of the first
element in the source.You’ll see it has many classes. Look for the class that starts with “page-id-…”. That’s the class you should use.
You can check THIS video guide.
And now add the below CSS:
.page-id-53 .header-image-wrap img { content: url('https://res.cloudinary.com/fleurop/cmsimages2/content/newsletter/alles-ueber-blumen/valentinstag-rosenblaetter-header.jpg'); }Help link https://docs.themegrill.com/knowledgebase/where-do-i-add-my-custom-css/
P.S Header image must be enabled.
Thanks and Regards,
Milan.Hi Milan,
Thanks for you reply.
by some reason i cant see the page-id.
I use the servise widget for one of my pages. When im on the home page the page-id is there. The problem shows when i click on the headline or read more bottom that is displayed by the service widget, that opens new page. Here when i inspect element there is no page-id.
I can also see page-id when i click read more bottom from the slider.
and how I enable header image?Hi @alekmisjen,
Could you please provide the site URL so that I can see the issue first hand and provide you with the appropriate solution.
Thanks and Regards,
Milan.I work on local server for now. I found page-id. Thanks 🙂
How i enable header image? Becouse i can’t see the image now. So sorryyyy i bother so much.
-
This reply was modified 6 years ago by
alekmisjen.
Hi @alekmisjen,
You can enable the header image following below steps.
- Enable the Header Image from Appearance->Customize->Header Media
- Down below there’s Header Image, Add new image and upload
- Finally publish.
Thanks and Regards,
Milan.Hi again,
that doesnt work for me. The header image is enabled and I use the code you give me previously and I can’t see different images.
Its showing only the image that uploded throug header media.
I use this code.page-id-121 .header-image-wrap img {
content: url(‘http://localhost/wordpress/wp-content/uploads/2020/04/87578364_129555728451098_2633896296364113920_n-1.jpg’);
}The localhost was the problem. I have my header images on different pages.
Thanks -
This reply was modified 6 years ago by
The topic ‘Header Image’ is closed to new replies.
