I recently used publicly-visible collections to organise my profile page, giving me three categories of project.

Now, by default these "sections" each have a simple text-heading. I would like to instead have image-headings, in order to add some visual interest to my page.

I've already requested and been given access to the CSS editor, and have spent some time experimenting with it and searching for ways to do what I have in mind--thus far to no avail.

In my searches I've found the ".game_grid_widget" class, which seems to be the one that controls the collection-sections, and some of its children, such as ".game_list"--but thus far no class that applies specifically to the collection-headings. Indeed, from what I've seen when inspecting the page, those appear to be controlled by basic "<h2>" tags, with no class applied.

Is there a way to do what I want? And if so, how? (Whether using my current approach of sectioning my projects via collections, or by manipulating the default display of projects in some way.)

It's perhaps worth mentioning that while I have used CSS before, I am somewhat of a novice at it!

I believe that I've found the answer--or at least, an answer.

In case it helps others who might want to do something similar, here follows the skeleton of the code that I used:

/*
Note the use of "nth-child"; this allows us to select the relevant image for each collection.
Within this "nth-child", we want to alter the appearance of the title-link given for
the related collection. This link is produced by an "<a>"-block, which is
contained within an "<h2>" block, which in turn is contained within a div
of class "inner_column".
*/
.collections .collection_row:nth-child(1) .inner_column h2 a
{
/*
The below does three things, if I recall correctly:
1) Force the link to have a given width and height, specifically
   that of the intended image.
2) Force the text off-screen (note "text-indent" here)
And 3) Have the link display the intended image.
*/
    display:block;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    width:[YOUR IMAGE-WIDTH IN PIXELS];
    height:[YOUR IMAGE-HEIGHT IN PIXELS];
    background-image:url('[THE URL TO YOUR IMAGE]');
}
/* Repeat for the remaining collections... */