Change background image page header overlay for each category

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.

Topic custom-background categories images Wordpress

Category Web

1
answered at

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

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.