Hi,
I use category template 8 and I added the code, that I found on this forum, to get image in the background of the category box.
.td_category_template_8 .td-category-header {
background-image: url("bg-image.jpg");
background-repeat: no-repeat;
background-size:100%
}
What I’m looking for now is such a modification of this code, that will give me different images depending on the category. Now it’s the same image for all categories that use this template. Since all categories have different ids I suppose it could be done somehow (even manually by adding a code for each and every category, I have only 7 so it’s fine), am I right?
Hi,
If you want to add different images to different categories, you will have to add multiple instances of the code and use the category name like so:
.category-gadgets .td_category_template_8 .td-category-header {
background-image: url("bg-image1.jpg");
background-repeat: no-repeat;
background-size:100%;
}
.category-fashion .td_category_template_8 .td-category-header {
background-image: url("bg-image2.jpg");
background-repeat: no-repeat;
background-size:100%;
}
.category-news .td_category_template_8 .td-category-header {
background-image: url("bg-image3.jpg");
background-repeat: no-repeat;
background-size:100%;
}I hope this helps.
Thanks.
Hello,
We need to have a specific background for each category, I added the following code:
.td-category-header.td-image-gradient-style8{background-image: url(“bac.gif”);}
it changes all the category box background, I tried to use the name of the category in this code.
it doesn’t work:
categories name i need to change the background for (classic, farmhouse) I tried
.categoty-classic.td-category-header.td-image-gradient-style8{background-image: url(“bac2.gif”);}
.categoty-farmhouse.td-category-header.td-image-gradient-style8{background-image: url(“bac3.gif”);}
Thanks to help us to solve it.
Regards,
Hi,
The spaces are very important in css. If you have used the code like you have pasted it above it will not work. Please check Bogdan’s code.
Thanks!
Hi,
Thanks for your reply,
Spaces are n’t affect the css code , This code has no spaces and it works fine, but it changes the background for all categories.
.td-category-header.td-image-gradient-style8{background-image: url(“bac.gif”);}
If I have a category its name “Farm” and slug”farm”
I added this code but it doesn’t work.
.category-Farm .td_category_template_8 .td-category-header .td-image-gradient-style8 {
background-image: url(“http://www.baereralreaerermyed.com/wp-content/uploads/2016/11/back3.jpg”);
background-repeat: no-repeat;
background-size:100%
}
Regards,
Hi,
Try to use this code:
.category-farm .td-image-gradient-style8{
background-image: url(http://demo.tagdiv.com/newspaper/wp-content/uploads/2016/05/login-mod.jpg);
background-repeat: no-repeat;
background-size:100%;
}
Thank you!
Hi,
I use Bogdan’s css code but found i have to modify it slightly and use the category ID instead of the name.
eg:
.category-40 .td-category-header.td-image-gradient-style8 {
background-image: url(http://demo.tagdiv.com/newspaper/wp-content/uploads/2016/05/login-mod.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
Give it a try.
Kevin
Hi Bogdan,
Thanks it works fine now,
Regards,
I was referred to here, but I still don’t get it. I am a total noob with website building, so where should i put that upper code in the beginning of this post?
Any css code should go in the theme panel-> custom css box: http://screencast.com/t/qCg3Drxp
You will also have to change the image and the category name in the code like this example:
.category-my_category_name_here .td_category_template_8 .td-category-header {
background-image: url("my_image_here");
background-repeat: no-repeat;
background-size:100%
}
Thank you!
It doesn’t work, sorry for the problem:
see image:
https://www.dropbox.com/s/r2fzfv5d943xn3b/Schermafdruk%202016-11-29%2016.00.37.png?dl=0
Hello noori020,
Please be more carefully when you write the code because it is not complete. Please look at this -> http://screencast.com/t/ywJ1ZvmCMX
Thanks for the message!
I’m sorry, it still doesn’t work:
https://www.dropbox.com/s/vpsx3yl46sdb6y0/Schermafdruk%202016-11-29%2016.27.50.png?dl=0
?
?
Scroll up this page and read:
Due to our National Day, between 30.11.2016 and 1.12.2016 we offer limited support.
can;t you read? :
I’m sorry, it still doesn’t work:
https://www.dropbox.com/s/vpsx3yl46sdb6y0/Schermafdruk%202016-11-29%2016.27.50.png?dl=0
The help sucks. I’m even getting attitude now. Just help me with this….damn. Not everyone is a expert and I paid for this specially for the help so expect a lot of questions
Hello noori020,
I have inspected your custom code and you have some syntax errors, like this -> http://screencast.com/t/5ytIgus4QF In the future, please notice that you can search it on Google because there you find anything and solve the problem quickly because we can not always give a quick response. You can check here -> http://www.w3schools.com/css/css_background.asp
Thanks for the message!
