Hey @revote - so this is actually a sneaky little bit of CSS.  We did this for both Events and Groups, but in the meantime we have full customization mode for the Events page.  :) 

Here’s the code that you could use to achieve the same effect.

/* CSS for Events Header  */
.group-overview-wrapper-title{
background-image: url("https://insert_your_image_file_here.png");
  height: 240px;
  background-size: cover;
  align-items: center;
  justify-content: center;
  display:flex;
  margin-bottom: 32px;
  margin-top: 10px;
  color: white;
}

Awesome, thanks a lot @Kenneth R. Works nicely

I played with Copilot and now I have separate hero image in desktop and mobile. I founded that scaling is difficult when using same image. The best result would be if add separate hero to tablet devices as well.

I added border radius also, to desktop. Now hero looks nice.

Note: Use this code for your own risk. Test carefully, with several devices and screen sizes. Horizontally and vertically.

/* CSS for Groups Header  */
.group-overview-wrapper-title{
background-image: url("image_url");
  height: 400px;
  width: 1140px;
  background-size: cover;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-bottom: 40px;
  margin-top: 40px;
  color: white;
  border-radius: 16px;
}

/* CSS for Groups Header on Mobile Devices */
@media (max-width: 812px) {
  .group-overview-wrapper-title {
    background-image: url("image_url2");
    height: 200px;
    width: 395px;
  background-size: cover;
  align-items: center;
  justify-content: center;
  display:flex;
  margin-bottom: 10px;
  margin-top: 10px;
  color: white;
    border-radius: 0;
  }
}

Wow that’s awesome @revote - thanks for sharing!