If anyone is searching and finds this topic, the above code no longer works but I made an updated one.
.current-user {
position: relative;
}
.current-user::after {
position: absolute;
content: '';
display: block;
top:-16px;
left: -8px;
width: 45px;
height: 45px;
/* UPDATE THE URL BELOW */
background: url(URL HERE) no-repeat center;
background-size: contain;
pointer-events: none;
}
The “pointer-events” line is also important because without it you can no longer click on your profile picture to open the menu because the hat overlay blocks it (you can click top right corner, and the very bottom, but this is annoying and not immediately noticeable)
The other code posted by @Robert (the second one) to add the hats on in-topic profiles still works, however it contains the same issue (although less important because you can still click on the username directly beside the picture this time) but if you would like to fix that one too you can also just add pointer-events: none;