Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Switch header image depending on wordpress category using a background image

Prev Previous Post   Next Post Next
Old Nov 18, 2016, 12:18 AM
22 posts · Apr 2014
Switch header image depending on wordpress category using a background image

Dear people! Im running a wordpress installation where I use different images in my header, depending on the category of the wordpress post or page in question. So I have a category "Tech" with a different header image than category "About us", etc.

Until today I have been doing this with a simple trick: by defining all header images in my html, but setting them to "display:none;"

This makes them invisible to the user. When a wordpress post or page with the category in question is accessed, my css displays the right image by setting it "display:inline;"

This works nicely across all browsers, but it has a disadvantage: all images have to be loaded, of course, they are just hidden. So it creates unnecessary server load, and since I plan to use a lot of new categories in the future, I have to do this in a better way.

I know there are plugins to switch the header depending on the category, but they were not too stable when I tried them last time, and with Atahualpa I thought there would be a better way.

What I have come up with is simple: Instead of displaying or hiding header images, I could just display no image at all at the start. Then, if a user accesses a post from category "Tech", the css could load the necessary header image as a background-image.

Code in the header (just a div to take the image):

<div id="#my_custom_header_image"></div>

Code in css inserts in Atahualpa:

body.archive.category.category-tech #my_custom_header_image {
height: 100px;
width: 200px;

So images are loaded on demand, and I need neither plugins nor javascript or anything. Its just important to remember that you must always define the size of the background-image, otherwise it may happen that it is not displayed at all (thats the way background images work in html, as I see it).

What do you think of this method? Can I do this or does it have disadvantages? Im a little concerned what search engines make of this, or if it could break things because its not really what background-images are meant for. But tempting...


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to change header image depending on language (using qTranslate) ? marsyg Header configuration & styling 5 Dec 27, 2010 08:58 AM
custom image in sidebar depending on page-ID vito Sidebars & Widgets 1 Aug 12, 2009 11:26 AM
How to Switch the Logo Area and Header Image tim5046 Header configuration & styling 1 Jun 2, 2009 12:43 PM

All times are GMT -6. The time now is 12:59 PM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.