0

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.

Improve this question

1 Answer 1

Reset to default
0

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

Improve this answer
3

Your Answer

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

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