Header Images Per Page

Hi,

Is there a way to set an individual header image per page? I want to set header images specific to each page on my blog.
Link: http://creative.co.tt/wordpress/
Thanks.

Dear Sam,

Thank you for asking.

That objective is possible to accomplish because each page has a unique body class. You can set different image by applying CSS code targeted for specific page. For instance the following CSS code:

.page-id-34 .header-image{
  background-image: url('http://yoursite.com/path/to/image.jpg');
}

The code above replaces the header image of your “About Us” page. It has page Id 34.

You can apply custom CSS code above through the Simple Custom CSS plugin or child theme’s style.css.

To find the page ID, go edit your page. Take a look at the browser’s address bar. You will see something like:

http://yoursite.com//wp-admin/post.php?post=2&action=edit

From the URL above, the page ID is 2.

I hope this reply helps.

Regards,
Kharis

Dear Kharis,

Thank you for the speedy reply, it is exactly what I am looking for. You saved my life!
Thank you!

Dear Sam,

Thank you for updating me.

You’re welcome. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, could you please rate our Sydney theme here? We would highly appreciate it if you do so.

Thank you for creating with our theme.

Have a nice day!

Regards,
Kharis

Hi Kharis,

The code works perfectly on desktop but I’m still seeing the old header image on mobile. How could I set same image for any resolution screen?

Thanks for your help!

Regards

Hello @kuntkint,

Try to wrap the code above in media query, so it will be applied only on a specified viewport.


@media only screen and (min-width:768px){
  .page-id-34 .header-image{
    background-image: url('http://yoursite.com/path/to/image.jpg');
  }
}

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Thanks for your quick reply!

I’ve already tried the media query code but it didn’t work.

This is the code for the page http://pre.macrolaser.com.co/maquinaria-laser/:

.page-id-24 .header-image{
  background-image: url('http://pre.macrolaser.com.co/wp-content/uploads/2016/03/maquinaria-corte-grabado-laser.jpg');
}

@media only screen and (min-width:768px){
  .page-id-24 .header-image{
    background-image: url('http://pre.macrolaser.com.co/wp-content/uploads/2016/03/maquinaria-corte-grabado-laser.jpg');
  }
}

I’ve tried with “max-width” also (it makes more sense, right?) but it didn’t work either.

Thank you very much again for your help.

Regards.

Hello there,

Try to clear your mobile browser’s cache before reloading your page.

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

I’m afraid it’s not the cache of the browser. I’m doing all my test in incognito mode and if I change the default header image I can see the change as soon as I refresh the page.

The behaviour is very strange but I found a pattern. It doesn’t matter what “max-width” or “min-width” you set, the header image will always be different above 1024px and below 1024px.

For instance, if I set this code:

@media only screen and (max-width: 3000px){
  .page-id-24 .header-image{
    background-image: url('http://pre.macrolaser.com.co/wp-content/uploads/2016/03/maquinaria-corte-grabado-laser.jpg');
  }
}

The header image will be still different in 1280 x 800 (correct header image): http://bit.ly/1WiTcsK or in 1024 x 600 (default header image): http://bit.ly/22dwExc

But if I change the code to this:

@media only screen and (min-width: 12px){
  .page-id-24 .header-image{
    background-image: url('http://pre.macrolaser.com.co/wp-content/uploads/2016/03/maquinaria-corte-grabado-laser.jpg');
  }
}

The behaviour will be the same than with the other code: the header image change at 1024.

So there is something overriding the settings of the “background-image” at 1024 but I can’t find it. It’s driving me nuts! :smiley:

This is the current and complete CSS custom code for that specific page:

@media only screen and (max-width:3000px){
  .page-id-24 .header-image{
    background-image: url('http://pre.macrolaser.com.co/wp-content/uploads/2016/03/maquinaria-corte-grabado-laser.jpg');
  }
}

.page-id-24 .header-image{
	background-image: url('http://pre.macrolaser.com.co/wp-content/uploads/2016/03/maquinaria-corte-grabado-laser.jpg');
}

.page-id-24 .overlay{
  display: none;
}

.page-id-24 .entry-header{
  display: none;
}

Thanks again for your help.

Regards.

Hello mate, this works for West Pro as well?

Hello, found any solution for mobile devices?

Hi Kharis,

That css worked like a charm, really cool!
Is there a way to change the logo per page too?

Thanks a million!

I have the same problem. The headers on my mobile site reflect the stock image provided by Sydney. I have custom headers on each page of the desktop site. I tried the CSS quote above but it does not work. I also cleared the cache but no change.

Hello
I have sydney pro child theme. I am trying to update the custom CSS to change header image on each page. I tried you code eith my image url. However i was trying to get page id through url but it shows post no. instead.
.page-id-34 .header-image{
background-image: url(‘http://yoursite.com/path/to/image.jpg’);
}

It didnt work. Kindly help

Hello there,

Try using the Unique Headers plugin for other alternative solution which might be much easier to you.

Regards,
Kharis