Display Different Header Images Using CSS Code

Jul 10, 2013

—

I’ve already shown you how to display unique header images on different pages, posts, categories and archives using PHP code.

In this tutorial, i’ll provide all the working CSS code tested using dozens of different options.

Generally, there’s 3 ways to achieve the same result when using WordPress:

PHP Code
CSS Code
Plugins which include PHP and/or CSS code

When it comes to changing header images, CSS code is one of the best solutions.

This code assumes you have uploaded your header images to your child themes images folder.

All CSS code should be pasted at the end of your child themes style.css file.

Note: If you added your header image using the Custom Header uploader under the Appearance menu in your dashboard, it will display site wide therefore you will need to remove it conditionally on the pages you want to add a different header using CSS code from this post.

Same Header All Single Posts Using Full Width Layout

.single-post.full-width-content .site-header {
background: url("images/single-full-width.png") no-repeat scroll 0 0 transparent;
}

Same Header For All Category Pages Using Full Width Page Template

.category .full-width-content .site-header {
background: url("images/category-full-width.png") no-repeat scroll 0 0 transparent;
}

Same Header Image For All Pages Only Using Full Width Layout

.page .full-width-content .site-header {
background: url("images/page-full-width.png") no-repeat scroll 0 0 transparent;
}

Use Same Header Image On All Full Width Layout Pages and Posts globally

.full-width-content .site-header {
background: url("images/header-full-width.png") no-repeat scroll 0 0 transparent;
}

Use The Same Header On Pages Using Default Template

.page-template-default .site-header {
background: url("images/header-page.png") no-repeat scroll 0 0 transparent;
}

Change Header For Specific Single Post

.postid-007 .site-header {
background: url("images/header-post.png") no-repeat scroll 0 0 transparent;
}

Same Header Image On All Archive Pages

.archive .site-header {
background: url("images/header-archive.png") no-repeat scroll 0 0 transparent;
}

Same Header Image For All Category Pages

.category .site-header {
background: url("images/header-category.png") no-repeat scroll 0 0 transparent;
}

Different Header Image For Specific Category Archive

.category-blogging .site-header {
background: url("images/header-category.png") no-repeat scroll 0 0 transparent;
}

Change Header Image Home Page Only

.home .site-header {
background: url("images/header-home.png") no-repeat scroll 0 0 transparent;
}

Add Different Header Image For Blog Page Template

.page-template-page_blog-php .site-header {
background: url("images/blog-header.png") no-repeat scroll 0 0 transparent;
}

Different Header Image On Specific Page

.page-id-007 .site-header {
background: url("images/unique-header.png") no-repeat scroll 0 0 transparent;
}

Add Unique Header Image On All Landing Pages

.page-template-page-landing-php .site-header {
background: url("images/landing-page-header.png") no-repeat scroll 0 0 transparent;
}

Finding The Right Classes

All the CSS code above has been written using classes you’ll find by viewing the source code of specific pages in WordPress.

Once you scroll down and find the body class, you can then find which classes to use in your code to customize the display of your header images specifically.

Here’s a view of the source code for a single post.

body class="single single-post postid-38732 single-format-standard header-image header-full-width content-sidebar

And here’s a view of the source code for one specific category page.

body class="archive category category-web-design category-134 header-image header-full-width content-sidebar

The web development tool, Firebug, also enables you to find CSS classes that you can use to create new styling rules for customization and display of header images on your website.

Other Options – Different Themes

Every theme is slightly different so you you may need to try out different solutions.

Here’s another method which includes using PHP and CSS code to add a default image on the home page and a different header on all other pages.

Prefer a Plugin

The WP Display Header plugin is an excellent option if your prefer plugin to code. Also find out other options for displaying specific header images using CSS code and PHP code in the Genesis Simple Hooks plugin.

Using PHP Code With Custom Fields For Displaying Different Headers

One of the most powerful and flexible ways to use unique headers on specific pages and posts is to create a custom field. Read more about how to create a custom field in Genesis for adding unique headers to any page or post.

Comments

24 responses to “Display Different Header Images Using CSS Code”

serge

October 30, 2014

Hi,

If i have a category news for example and want a specific header image for that category then i use this
[code]
.category-blogging .site-header {
background: url(“images/header-category.png”) no-repeat scroll 0 0 transparent;
}
[/code]
but when i click on a post in that category the header image does not appear.
how can i make the image appear on all post in that category alone ?

Log in to Reply
How to Display Different WordPress Header Images

June 4, 2014

[…] is a great tutorial on how to display different WordPress header images on various posts, pages, and archive pages of a […]

Log in to Reply
Corey

May 17, 2014

I hope I am not double commenting here… I suppose you can just delete it if I have…

Just wanted to say that I want to hire you to do this for me.

How much am I looking at?

Thanks,

Corey

Log in to Reply
Corey

May 17, 2014

Hi Brad,

LOL, fair enough too!

I have no issue with hiring you. How much would it cost me to have you just do it for me?

😉

Corey

Log in to Reply
1. Brad Dalton
  
  May 17, 2014
  
  For you, i will do the PHP for $50.
  
  Please send me an email here brad@wpsites.net
  
  I’ll need a copy of your child theme which includes the images or FTP access.
  
  Log in to Reply
  1. Corey
    
    May 17, 2014
    
    e-mailing you now 😉
    
    Log in to Reply
Brad Dalton

May 17, 2014

Thanks for the question Corey.

Yes. Emily also used the Custom Header function under Appearance which adds a image site wide which is why she had problems.

What she didn’t do is remove the default header image from the home page which caused both images to display as she added another using CSS.

There are other solutions i have used which you can try and all code i post is tested and works. The problem is, the code only does what its written to do and doesn’t do everything unless you modify it.

Log in to Reply
1. Corey
  
  May 17, 2014
  
  Hi Brad,
  
  First, thanks for getting back to me so fast, second, thanks for just being such an awesome dude. Having people like you out there in internet land is the only thing that makes this sort of stuff possible for a lot of people like me who, despite having been tinkering around with this stuff for years, really really need people like you around.
  
  Now my question. So how do I remove the default header image image from the home page?
  
  Just so you know what I am trying to do.
  
  I basically just want two different header versions. One for the home page which will be bigger and have a bit of blah blah like a tag line with the site name. Every other page will have a smaller header without the tagline (so one header will be like 250px and the other 125px).
  
  I also want to make them both responsive. So essentially the header is the same for every page (at 125px responsive), but the home page has a larger (250px responsive) header.
  
  Is this possible with the codes you have?
  
  Thanks,
  
  Corey
  
  Log in to Reply
  1. Brad Dalton
    
    May 17, 2014
    
    Try this http://wpsites.net/web-design/add-custom-header-to-home-page-only-in-genesis/
    
    Some work maybe required on your behalf for the Media Queries and modifying the code to work with different heights.
    
    Log in to Reply
    1. Corey
      
      May 17, 2014
      
      Hi Brad,
      
      Thanks again. I followed the instructions on the link above to the tee (well I think I did).
      
      I haven’t adjusted the Media Queries yet etc – just wanted to make sure what I did worked before fine tuning.
      
      The home page image comes up fine (this is a brand new site running genesis sample over genesis framework), I created three pages (test, test 2, test 3 etc)
      
      I’ve got the images in the child theme and I put the urls where they should go (I think) – anyway when you click on test page 3 there is no header at all, test page 2 is the same, and test page comes up with all this weird stuff… looks like this:
      
      Index of /test
      
      [ICO] Name Last modified Size Description
      [DIR] Parent Directory –
      [DIR] apacheasp/ 04-May-2010 06:53 –
      [DIR] cgi/ 04-May-2010 06:53 –
      [DIR] coldfusion/ 04-May-2010 06:53 –
      [DIR] fcgi/ 04-May-2010 06:53 –
      [DIR] miva/ 04-May-2010 06:53 –
      [DIR] perl/ 04-May-2010 06:53 –
      [DIR] php/ 04-May-2010 06:53 –
      [DIR] python/ 04-May-2010 06:53 –
      [DIR] ssi/ 04-May-2010 06:53 –
      
      I don’t mind giving you my url (but you might LOL) – I suppose what I am asking is would you mind having a look and telling me where I might be going wrong? I would really appreciate it
      
      Newb 😉 LOL
      
      Corey
      
      Log in to Reply
      1. Brad Dalton
        
        May 17, 2014
        
        Did you read the new post i linked to and published today.
        
        Nope, can’t give free code reviews. Been more than generous already.
        
        But you can hire me.
emily

April 2, 2014

Hi brad,

i’ve been able to use one of the snippets above to get a unique logo on my homepage only. the thing is, the secondary logo i’m using on the rest of the site is showing up behind it. how can i fix that?

also, this homepage logo does not appear to be responsive. what can i do to make it responsive.

thanks for your advice,
emily

Log in to Reply
1. Brad Dalton
  
  April 3, 2014
  
  You need to use the CSS in the Media Queries section of your style sheet to make any customization responsive.
  
  Log in to Reply
  1. Corey
    
    May 17, 2014
    
    I’m having the same problem as emily and I don’t see a response to the question, am I missing something?
    
    Emily said:
    
    “Hi brad,
    
    i’ve been able to use one of the snippets above to get a unique logo on my homepage only. the thing is, the secondary logo i’m using on the rest of the site is showing up behind it. how can i fix that?”
    
    How do you fix that?
    
    Log in to Reply
2. Brad Dalton
  
  May 17, 2014
  
  Try this http://wpsites.net/web-design/add-custom-header-to-home-page-only-in-genesis/
  
  Log in to Reply
Gina

March 15, 2014

I have followed the instructions above (add a different header to a specific post) but it is not working for me. Here is the code I added at the end of my style.css file
[code]
.postid-157 #header {
background: url(“images/header-cousins.png”) no-repeat scroll 0 0 transparent;
}
[/code]

The image is not changing.

Any ideas?

Log in to Reply
1. Brad Dalton
  
  March 15, 2014
  
  Hello Gina
  
  The markup has changed since Genesis 2.0 was released last year.
  
  You can simply change #header to .site-header if your theme is running HTML 5.
  
  Here’s an example:
  
  [code]
  .postid-157 .site-header {
  background: url(‘images/header-cousins.png’) no-repeat scroll 0 0 transparent;
  }
  [/code]
  
  Log in to Reply
  1. Gina
    
    March 18, 2014
    
    I was able to do what I needed using the Custom Background plugin. Thanks
    
    Log in to Reply
Janeth

January 16, 2014

Great Post Brad. Thank you very much.

Log in to Reply
Tweet Parade (no.28 July 2013) – The Best Articles of Last Week | gonzoblog

July 13, 2013

[…] Display Different Header Images Using CSS Code – I’ve already shown you how to display unique header images on different pages, posts, categories and archives using PHP code. I’ll provide all the working CSS code tested using dozens of different options. […]

Log in to Reply
Chris Becker

July 10, 2013

Great article Brad. I use CSS to control all of my custom header images. It always does the trick for me.

I like your motivational question at the end – I assume that’s a test for us. 😀

Thankfully we have the WordPress Codex.
This link shows what filter we can add to the functions.php to add classes to our body tag:
http://codex.wordpress.org/Function_Reference/body_class#Add_Classes_By_Filters

Now all we have to do is add a new class to the styles.css file – something like:
body.category-name {
background: url(images/custom-bg-for-category.jpg) no-repeat 0 0 #ffffff;
}

Hopefully someone may benefit by it.
Thanks for the exercise.

CB

Log in to Reply
1. Brad Dalton
  
  July 10, 2013
  
  Thanks Chris
  
  Yes, I find CSS a better way to control different headers for specific pages.
  
  Tested all the code above but couldn’t find a solution without using PHP.
  
  Trying to find a pure CSS solution as a challenge.
  
  Log in to Reply
  1. Chris Becker
    
    July 10, 2013
    
    Hmm. It seems that an important part of this is to define what category the post is in at the body div level. This doesn’t seem to be done with our standard templates (in Genesis and Twenty-Twelve anyway).
    
    I can’t find a way to designate the post’s or category’s custom background that is relative to a category without having some way to define or detect that it’s in a particular category at the body level. In most of my sites, the category name is only given after the #category level.
    
    The only other way I see is a restructuring of the templates – more php code though.
    Are you looking for this solution because you don’t have access to functions.php or the templates? Or are you just trying to stretch us?
    
    Log in to Reply
    1. Brad Dalton
      
      July 10, 2013
      
      Its the header and I tested the code for hours but there’s no way to use a different header on all posts in a category using CSS without adding custom PHP.
      
      Looking in the source code I can understand why but you’d think it would be easy considering everything is which I have coded above.
      
      Log in to Reply