Each page with different header image

How can i set different image on each page header?

Ive seen its possible to do in Illdy theme with code like this:

.page-id-12 #header {
    background-image: url("http://lorempixel.com/400/200/") !important;

but it doesent seem to work for shapely


I have the same problem.

How to set an individual header image for a single page?

Anyone have an awnser yet? I have the same problem… Allready made 2 topics but no reply’s on them…
Please help.

Hey there,
Hope you’re doing well today

Sure, you can, however, you’ll need to modify the CSS above to work with this theme and your Page IDs. In order to be in a better position to assist you, I’ll need a link to your site and a page that you’d like to modify and I’ll try to get some CSS that works for you.

I look forward to your reply :slight_smile:

Best Regards,

Same problem here.
The pages I am currently trying to change is:

I have put the following in the editor

.page-id-5 #header {
    background-image: url("http://demingcircle.com/test2/wp-content/uploads/2017/05/Was_soll_ich_werden_55_cropped.jpg") !important;

I was hoping to be able to simply set the header as a “feature image”, this would seem to be a much more logical choice than people sending in individual sites to get the code for them. Wanting to have different headers on different pages strikes me as a fairly commonplace request :slight_smile:

Hello there,

I hope you are doing well today.

You can use the following CSS code to add a background to the pages by going to Appearance > Customize > Additional CSS and pasting it there:

/*Header Image*/
.page-id-12 .page-title-section {
background-image: url("http://lorempixel.com/400/200/") !important;

The theme does not have the option built in to use a featured image for the header on the pages however you can make a request for that feature using the following link:

Best Regards,

Thanks for the reply.
If i add the code to my css and edit the page id nothing happens.
how is this possible?

Hello there,

Could you please check to ensure the page id is correct?

Best Regards,

My website is on maintenance mode because im still working on it and i want it to be done before i put it online.
Is there any way you can see it but still have it on maintenance?

Hello there,

Some maintenance plugins have the option to use a password to grant access to the page you can try using that option.

Best Regards,

Great thanks!
This is the link to 1 page:

I have done numerous tests of this and none have worked.

Using the CSS given above (but with my own page id and url link to the image) I have:

-put it in the CSS editor
-changed it in main.css
-added the code to put it in the head of the page

None of these have worked. Do we need to turn off the other header somehow? Do we need to actually define the page id on the page?

Has anyone else has success with this CSS?

Hi there,
Thanks for keeping in touch with us.

@rcmdesign For that page you sent me, its page-id-35 and it’s showing the image attached.

@kimberly Kindly provide us with some temporary admin access to your site. We’ll be in a better position to spot anything suspicious from here.
You can add new users by going to Users > Add New set the user and password for us, set the role to admin and set the info here. You can navigate here for more details:

I look forward to your reply :slight_smile:

Best Regards,

Thanks for the reply,
Yes i now it is showing a image. But this image is shown on all the pages. And i want different images on every page. So the code does not work. I add it with Blog Archive Header Image

username: colorlib
password: kR59gZd&)QDXhZK^naMCH&BP

I have made you a temporary admin. I don’t think that there is anything suspicious, per se, just a problem setting the CSS to make different header images for each page.

Thank you


Any updates on where the problem is in setting different headers using page id?

I made you an admin and sent you a private message with the information. Please let me know if you did not receive it.


It has been a week since I have made you an admin for my website and have not had any response. This makes me very uncomfortable as I do not particularly want unknown people to have unlimited access to my site. If you are unable to solve the problem please let me know so that I can remove you as an admin.

.postid-[PAGE ID # HERE] #header {
background-image: url("[ENTER URL HERE]") !important;

Sorry, I replied to the wrong post. Ignore me.