Giving custom background image to a category header wp
Question
I'm doing a website on wordpress using newspaper theme, I want to display a custom header on each category but when I add the background with css all the categories display the same banner, and I'm sort of lost on how to achieve this.
This is the element that needs the background:
And this is what I was trying to do in CSS:
.category-galeria-fotografica > .td-theme-wrap > .td_category_template_6 .td-category-header{
width: 100%;
max-width: 1200px;
min-height: 200px;
height: 150px;
background-image: url(http://mywebsite.com/img/image.jpg);
}
Any ideas are very welcome :)
3 answers
solution1
1 2017-05-13 09:07:23
To set the different header for different category you can use the following way:
<body class="archive category category-template-2 category-54">
You can see that the category-54 class is in body when in a specific category. So you can write you code with the parent class of category-54, like :
.category-54 .td-category-header{
width: 100%;
max-width: 1200px;
min-height: 200px;
height: 150px;
background-image: url(http://mywebsite.com/img/image.jpg);
}
And you need to add all the category classes like the above way. You can find all the category ids from Post Category section in wp-admin . Al though this is not the correct way to add the category images but this is an quick remedy to your problem.
Hope this will work for you.
solution2
0 2017-05-12 20:15:47
I think you could give the div an id or add another class wich contains a php variable as value, ie: id="1".
Then in your css you have to declare multiple instance of this div wich goes by the id or class to show an image ie:
#1 {
background-image: url('1.jpg');
}
Edit: the id gets set by checking cagetory using an if or switch statement in php Note: I would use a childtheme to customize the header.php
solution3
-1 2017-05-12 20:56:44
url(http://mywebsite.com/img/image.jpg)
Needs quotes to work. This CSS error may be the cause of your problem, so:
url("http://mywebsite.com/img/image.jpg")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.