this is my site: http://styleofchamp.com/ and I'm trying to change the background image page header overlay for each category. I have been looking at many forums but I didn't get with the correct answer.

For example: on this page http://styleofchamp.com/category/futbol/ it should show a different background image page header overlay than this one: http://styleofchamp.com/category/tenis/

If anybody could help me with this I will be very grateful.

1 Answer 1


This is probably the easiest method.

If you inspect the <body> tag by pressing F12 in your browser you will see it has a different class for each category. You can use this to target your header element for each specific category.

For example, this will change the image for category 6.

body.category-6 .page-header {
    background-image: url( http://styleofchamp.com/wp-content/uploads/2019/04/sabri-tuzcu-190600-unsplash-1.jpg ) !important;

Note: You can upload images via the file uploader and then just replace the correct path for the background-image URL.

CSS changes can be added to Appearance > Customize > Additional CSS


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.