How do I place logos and text in specific areas using background image

Hi there,

Any chance you can link us to the site in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

I've included the private info. Please let me know if you need anything else. Thank you for your help.

Hi there,

is this going to be part of the page content? Or is it for the Site Header ?

Hi David,
Thank you for your response. I have tried two options:

Layout Element "Landing Page"
I created a Layout Element "Landing Page"
with a top image in the page with the logos above the image and the title text on the lower right of the image, but I could not get them to line up.

Header Element "HWEC - RSVP Landing Page Header"
I also created Header Element named"HWEC – RSVP Landing Page Header" with the two logos floating in the corners and the title text in the bottom lower right, but same result. I could not get the logos and text to line up like the screenshot below.

Also, this would not be visible in my Page "HWEC RSVP Landing Page". I set it to only apply to Page > HWEC RSVP Landing Page, not sure what setting I missed that it does not display on the page.

Screenshot:
https://snipboard.io/fDgEYP.jpg

I tried to keep it simple and use the container and grid with padding and margin to position the logos and title, but I just end up moving the background image with it. Not sure what I need to adjust to keep the background image in place and move the logos and title text to the correct positions as shown in the screenshot.

Thank you for any help you can provide.

- Lee

Hi Lee,

This is going to be quite tricky to deal with.

While you can easily line up the logos in mobile with this CSS:

.gb-grid-wrapper.gb-grid-wrapper-ac9f14c6 {
    flex-wrap: nowrap;
}

I'm not sure the layout itself is ideal for all viewports because there's a white spot for the text that will make the white logo practically invisible on some viewport sizes. See this - https://share.getcloudapp.com/d5u6Bqvm

I'd consider adding a vignette to it so the edges have some sort of darkened effect, adding contrast so the white logo is still visible when overlaying to the white spot for the text.

I tried to keep it simple and use the container and grid with padding and margin to position the logos and title, but I just end up moving the background image with it. Not sure what I need to adjust to keep the background image in place and move the logos and title text to the correct positions as shown in the screenshot.

Consider not using "Full-width" to the inner container of the section container blocks. This way you can minimize the spread/stretch between the logos.