Topic: Need Help Replicating Hero Background in GP + GBP

randika
May 8, 2025 at 8:59 pm

I’m currently migrating from the old theme and Elementor to GeneratePress + GenerateBlocks. At the moment, I’m having difficulty replicating one of the hero backgrounds (you can check the staging and live URLs in the private information field).

Could you possibly help me with some custom CSS to make the hero background a dark blue color like on the live site?

Thank you for your help!

Alvind

May 8, 2025 at 10:23 pm

Hi there,

Try adding this CSS:

.hero-jpm {
    background-image: radial-gradient(at top right, rgba(255, 255, 255, 0) 0%, #1D1359 61%), var(--inline-bg-image) !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

randika
May 8, 2025 at 10:59 pm

Thanks, that worked. How about the hover background color? I tried adding this on hover:

background-image: radial-gradient(at top right, transparent, #100B2D 61%)

But the background image gets covered.

Alvind

May 8, 2025 at 11:49 pm

Try this instead for the hover state:


radial-gradient(at top right,rgba(255,255,255,0) 0%,#100B2D 61%),var(--inline-bg-image) center /cover no-repeat

randika
May 9, 2025 at 1:28 am

As always, Thanks Alvind!
Alvind
May 11, 2025 at 7:04 pm

You’re welcome! 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Need Help Replicating Hero Background in GP + GBP