Archived topic
Full frame bg image with content on top, how?
7 replies · Started by Ala on May 5, 2021
Hello everyone,
I have GP premium and generatepress block pro, and trying to get up to speed with using them with gutenberg (no page builder).
I'm trying to have a layout crudely described by this: https://www.figma.com/file/lTPcSWl2RJv4MywrKD1ADL/Untitled?node-id=0%3A1
The main challenge I face is with regards to setting a header background image, and to add content on top of it.
If I add header background as full page via elements, then I don't get to see the header when I edit the page (in order to align some content on top), does that mean I need to then add the content via header code editor in element?
Alternatively (and preferred method so far), I tried adding the full page background image via a container on the page editor (with merge header option), and I set it as full page by manually adjusting the padding (is there a better way?). Issue I have is when I then add box 1 via a left-sided grid and try to raise it up a bit (I found increasing lower margin helps with that), then the whole container (along with background image) stretches down.
Even if I keep this grid as is and try to add box 2 with an image, I'm not sure how to ideally place it to the right of and below box 1 , such that if website is viewed from mobile, then box 1 and box 2 will appear aligned vertically on top of ( a portion of) the background image (is this also best accomplished via manipulation of margin for this second grid?).
Thanks for all your help!
Hi Ala,
Are you trying to achive something like this?
https://www.screencast.com/t/8Db3HECgQ
The structure I'm using is as below:
https://www.screencast.com/t/tdkHsBdQ6LQF
You can directly build this in the page as its first container, then add a header element to merge the page with the header.
Hope this helps :)
Ok I see what you're doing! So just to check I understand:
- one big container for the background image
- a grid of 2 columns
- a container inside each grid column with content needed, and padding as required
am I correct? also, is this the ideal method to handle this situation?
Thank you!!
You understand correctly.
And yes, I think it's the best and most efficient way to build this layout.
Hello there, thisi s working very well except for one little issue.
As you can see from my website, the tree (which is a separate image) is on the ground at a certain browser width, beyond that it starts floating as the whole background image get stretched (I think). What would be the best way to handle it so that there's a specific structure (e.g. placement of tree on ground) that would never change?
Only reason I add tree as separate image (container background actually) is so that it falls under the headline if viewed from mobile.
Hi there,
looks like you moved the image to a container background - and it looks good.
You can set a Container Padding to %'s - try just setting the top and bottom padding to a %. This will keep it repsonsive to the screen width.
As a note - i see you have added a Container Block inside a Grid Column - although you can do that, its not necessary - each Grid Column is actually a Container Block :)
Great feedback, and indeed the change to % was the way to go!!
Thank you!!
Glad to be of help.
