Archived topic
Background of overlappping block not showing
9 replies · Started by CRAIG on July 7, 2021
I have created a block with a white background and then purposely set the margin so that it overlaps the block above it.
When I'm building the page it looks as it should, with the white background overlapping the image block above.
When I publish the site the background seems to become transparent, or get stuck under the image.
I seem to recall an issue like this on a previous (non-generate press) site and I had to assign an order to the background or something, not sure if this is a similar issue.
Link to site added privately
Hi there,
not sure i am seeing the issue - can you share a screenshot of the frontend vs the editor ?
Screenshot in builder: https://tinyurl.com/yjmajnq5
Screenhot on site: https://tinyurl.com/yg7qh36h
Hmmm... i am not seeing the HTML that would deliver that same result.
Personally my method would be to add inside the Grid Container Block:
Image Block
Container Block
--- headlines inside the second container block
--- more headlines
Then you can give the inner Container Block, some padding, left and right margin, negative top margin to create that.
Hi David,
My grid container which separates the 4 "sections" sits inside another container - should I delete that container?
The image block and the headline blocks below it are part of the same container as far as I can see???
Ignore the outer container and the Grid Block.
My listing above starts with the Column - each column is a Grid Container.
To be clear:
Grid Block
- Grid Column ( Container Block )
---- Image Block
---- Container Block ( this gets the padding and margins and white background
—------- headlines inside the second container block
—------- more headlines
Hi David,
I am certain that I have followed your instructions, but again the white background is not showing over the image when viewing the front end of the site. It is displaying correctly in the editor.
I have made the changes on the bottom right column this time to see if that made any difference but I'm still getting the same result
Hi Craig,
When you are using a negative margin, a z-index property should be given to the container.
As you can see in the below screenshot, I set the z-index for the container, then it appears on top of the image.
https://www.screencast.com/t/t76IozSinHU
You can set it by selecting this container, in its spacingsection, you'll see the z-index field.
Let me know if you need further assistance :)
I said that in my first post!
I seem to recall an issue like this on a previous (non-generate press) site and I had to assign an order to the background or something, not sure if this is a similar issue.
Thanks for your help
No problem :)
