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
Solved
How to add hero image to the Groups home page?
+2Best answer by Kenneth R
Hey
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;
}
+5Hey
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;
}
+2Awesome, thanks a lot
+2I 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;
}
}
+5Wow that’s awesome
Sign up
If you ever had a profile with us, there's no need to create another one.
Don't worry if your email address has since changed, or you can't remember your login, just let us know at community@gainsight.com and we'll help you get started from where you left.
Else, please continue with the registration below.
Welcome to the Gainsight Community
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.