I figured out how to do this and thought I’d share the technique that worked for me. To add the image at https://some.url as the background for the category with the id category-off-topic-rwby, I used this CSS in a theme component:
body[class~="category-off-topic-rwby"] {
#background {
background: url(https://some.url);
background-position: center center;
background-size: cover;
z-index: -1;
opacity: .50;
min-width: 100vw;
width: auto;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
}
That centers the image at https://some.url and desaturates it (using the opacity property), plus makes it fixed so that it doesn’t scroll with the page. The result:
