Skip to main content
revote
revote
VIP ⭐️⭐️⭐️⭐️⭐️
April 10, 2024
Solved

How to add hero image to the Groups home page?

  • April 10, 2024
  • 4 replies
  • 149 views

Here Gamechanger community is hero image in the Groups home page, how it is done? I can add hero image only to the group, not to the Groups home page.

 

 

Edit: Mods, please fix the typo in the title 😀

Mod edit: FIXED!  :-D

    Best answer by Kenneth R

    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;
    }

     

    4 replies

    Kenneth R
    Kenneth RAnswer
    Expert ⭐️⭐️
    April 10, 2024

    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;
    }

     

      revote
      revoteAuthor
      VIP ⭐️⭐️⭐️⭐️⭐️
      April 10, 2024

      Awesome, thanks a lot @Kenneth R. Works nicely 👌

      revote
      revoteAuthor
      VIP ⭐️⭐️⭐️⭐️⭐️
      August 7, 2024

      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;
        }
      }

       

        Kenneth R
        Kenneth R
        Expert ⭐️⭐️
        August 7, 2024

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

          Terms & ConditionsAccessibility statement