How to create a different background image per category?

[HansPrive]

Using Weaver II Pro.

I want to create a different full screen responsive background image for each post-category.
Did anyone managed to do this?

[scrambler]

If you mean the overall background of the browser, you can do it with Custom CSS rules.

To be sure of the proper CSS to give you, please provide a link to one of these category pages

[HansPrive]

Page: http://www.xxxxxx
Category: Safaribeoordelingen.

[scrambler]

OK, so if what you meant is that you want a specific overall background image on all single post pages of a specific category, this could prove non trivial.

There is a manual way to do it by adding the CSS rule below in Advanced Options > Head Section > Custom CSS Rule box, but you need to add a new selector for each post with the proper post id

.postid-xxxx, postid-yyyy, postid-zzzz {background:url(ImageUrl) no-repeat;background-size:cover;}

There may be a way to do that with an Action & filter, but @weaver would have to let us know if that is indeed possible.

[Weaver]

A very good PHP programmer familiar with the WordPress API could probably put together a child theme to do this in less than a day.

But it is not trivial. It could be done using Actions and Filters, but the code is not really all that small, and a child theme might be more appropriate.

But the idea would be to add a new ‘body_class’ filter (this is the exact name of the WP filter), and add the name of the single page’s categories to the body tag. Then one could add custom CSS rules for body with the appropriate BG Image url() and how to display that BG image. But writing that filter does require a good knowledge of the WP API to be able to retrieve the category slug to add to the body class list.

[scrambler]

@weaver 
“But the idea would be to add a new ‘body_class’ filter (this is the exact name of the WP filter), and add the name of the single page’s categories to the body tag. “

Given this is not the first time this question has come up, I think it would be a great addition 🙂

[Weaver]

But this is about Weaver II – so a child would be the only way.

[scrambler]

Goop point, but keep the idea for Xtreme 🙂

[Weaver]

Or Xtreme Plus…

[Author]

Posts