This has only been tested on default styles on PC and Mobile.
Recommended image width would be no smaller than 800px.
You can change the Category Height, Category Title Size, Font Color for Title and Descriptions etc.
Don't forget to change the colors etc to your likings and i hope this works for you.
This first code is just the basic add image code. See second code below if you want to go right out.
Code:
/* Categories Images and Title */
.block--categoryX .block-header {
background: url(/images/cover-image.jpg) no-repeat center center / cover;
color: #FFF;
}
/**********/
/* Categories Descriptions */
.block--categoryX .block-desc {
color: #000;
}
/**********/
/* Categories Images and Title Responsive */
@media (max-width: @xf-responsiveMedium)
{
.block--categoryX .block-header {
max-height: inherit;
}
}
/**********/