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

Old Nov 18, 2016, 01:18 AM
22 posts · Apr 2014
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...
Old Nov 18, 2016, 06:00 AM
juggledad's Avatar
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I think it is a pretty clever idea!

As of what the search engines will think..who knows, if they are not ok with it today, next week they might change their algorithms and it might be ok. The only way to tell would be to look at your rankings now, make the change and check them in a month.
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support


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 09:58 AM
custom image in sidebar depending on page-ID vito Sidebars & Widgets 1 Aug 12, 2009 12:26 PM
How to Switch the Logo Area and Header Image tim5046 Header configuration & styling 1 Jun 2, 2009 01:43 PM

All times are GMT -6. The time now is 08:25 PM.

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