How can i add picture at category description ?

[ErronBlack95 2]

Hello webflake members.

I want to ask a simple question.
How can i add image in this area and for every category different image ?
Here it's the demo picture what i want... 

http://prntscr.com/mksba8 picture from my forum, which i building now. I want to add images on category content, but i want to add in every category different images.

something like this....

 

[S!r.ReaDy 120]

I did manage to get the image, but it shows the same image per forum. If you have any forum links that have such feature, please share so we could get it working, the site from the image doesn't seem to work

This is how I got it atm.

The image does repeat.

.nodeList .node_1  .forumNodeInfo
{
    background-image: url("https://cdn.pixabay.com/photo/2016/07/02/12/21/wallpaper-1492818_960_720.jpg");
}

I will look further but a website example would speed up.

[ErronBlack95 2]

i try myself yesterday, result it's the same again.. i want a like background but image it's showing on every forum... i gived example image and maybe site it's not working idk it  thanks for try to help

[mr-pimpen 387]

you want a different image for each right that what u saying

 

if you use this the way i have it set it will work for your community

/* Coloured Node Categories */
.block.block--category.block--category1 .block-header {
background: url('https://www.site/Image/') repeat 50% 50%;
color: #ffffff;
}
/**********/

make sure you copy each one  and change this where the x is

.block.block--category.block--categoryX .block-header {

 

Edited February 15, 2019 by mr-pimpen
found the answer

[S!r.ReaDy 120]

3 hours ago, mr-pimpen said:

you want a different image for each right that what u saying

 

if you use this the way i have it set it will work for your community

/* Coloured Node Categories */
.block.block--category.block--category1 .block-header {
background: url('https://www.site/Image/') repeat 50% 50%;
color: #ffffff;
}
/**********/

make sure you copy each one  and change this where the x is

.block.block--category.block--categoryX .block-header {

 

This doesn't work for Xen2 as far as i know.

[mr-pimpen 387]

9 hours ago, S!r.ReaDy said:

This doesn't work for Xen2 as far as i know.

/* Categories Images and Title */
.block--categoryX .block-header {
background: blue url("../images/cover-image.jpg") no-repeat center / cover;
max-height: 60px;
text-transform:;
font-weight: bold;
font-size: 20px;
font-family: cursive;
color: #FFF;
text-shadow: black 0.1em 0.1em 0.2em;
overflow: hidden;
}
/**********/
/* Categories Title Hover */
.block--categoryX .block-header a:hover {
color: #FFF;
text-decoration: none;
opacity: .7;
}
/**********/
/* Categories Descriptions */
.block--categoryX .block-desc {
color: #000;
text-transform:;
font-family: monospace;
text-shadow:
   -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
     1px 1px 0 #FFF;
}
/**********/
/* Categories Images and Title Responsive */
@media (max-width: @xf-responsiveMedium)
{
    .block--categoryX .block-header {
        max-height: inherit;
    }
}
/**********/

this should work i tested on my forums change the x

[S!r.ReaDy 120]

7 minutes ago, mr-pimpen said:

/* Categories Images and Title */
.block--categoryX .block-header {
background: blue url("../images/cover-image.jpg") no-repeat center / cover;
max-height: 60px;
text-transform:;
font-weight: bold;
font-size: 20px;
font-family: cursive;
color: #FFF;
text-shadow: black 0.1em 0.1em 0.2em;
overflow: hidden;
}
/**********/
/* Categories Title Hover */
.block--categoryX .block-header a:hover {
color: #FFF;
text-decoration: none;
opacity: .7;
}
/**********/
/* Categories Descriptions */
.block--categoryX .block-desc {
color: #000;
text-transform:;
font-family: monospace;
text-shadow:
   -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
     1px 1px 0 #FFF;
}
/**********/
/* Categories Images and Title Responsive */
@media (max-width: @xf-responsiveMedium)
{
    .block--categoryX .block-header {
        max-height: inherit;
    }
}
/**********/

this should work i tested on my forums change the x

My mistake, I meant to say doesn't work for Xenforo 1.5. This person is using xenforo1.5

[mr-pimpen 387]

ight i just seen it let find it again

 

[ErronBlack95 2]

I will try it tomorrow. Thanks for share.

Regards.

[ajagtap 1]

Was searching for the same. Let me try this at my end too.

 

[sztokulaaa 0]

.nodeList .node_1  .forumNodeInfo
{
    background-image: url("https://cdn.pixabay.com/photo/2016/07/02/12/21/wallpaper-1492818_960_720.jpg");
}

[Shade7 0]

Great, just what I searched for. Worked for me, thank you.