Stick an image on a specific category page

[pfaffman (Jay Pfaffman)]

tl;dr

I need to have a “sponsored by” image on a particular category page.

mindless rambling

One idea was to put it in the category description excerpt, but that doesn’t display the image.

I suspect that the real answer is to connect to the category-name class and stick it in the main-link clearfix, uh, thingy.

[jomaxro (Joshua Rosenfeld)]

Does a category logo not work? Something like #howto:tips-and-tricks?

[pfaffman (Jay Pfaffman)]

No. They’re being used as they are intended. This needs to be in addition to the category image.

[Mittineague]

Got a mock-up? I’m having trouble imagining what you want where.

[Johani (Joe)]

Something like this?

or did you have something else in mind?

If it is, here’s an initial go at it.

I used:

// change category NAME as needed like .category-staff or .category-meta

.categories-list.category-NAME .list-controls:before { 
    content: "";
    display: block;
    background: url(img.jpg) no-repeat; // <~ change the url as needed 
    background-size: 100%;
    padding-top: 40%; // <~ change padding amount according to image aspect ratio
}

I’d be happy to sort out additional problems.

[pfaffman (Jay Pfaffman)]

I removed .categories-list to make it work, but this was what I needed! Thanks so very much!