Archived topic
Overlap Image on Container
5 replies · Started by Thushara on July 13, 2022
Hi guys,
I want to overlap an image from a container. I tried with margins as I do on Elementor. But did not find a way. See this image.
https://ibb.co/SKm9Xzn
Thanks
Hi there,
It's doable with GB, you can build something like this:
https://www.screencast.com/t/wRMYdIqRIpHw
1. Set the vertical alignment for Gridto default.
2. Set the vertical alignment for all 3 Grid containers to center.
3. Set a height value for the image block, eg.400px.
4. Set -100px top and bottom margin for the image container.
Thanks for that. I think the issue is that I am using a background image as well.
https://ibb.co/3v0VLVj
What is the solution with a background image?
Thanks
If you are using a background image, choose pseudo element as the Selector.
Then add an additional CSS class to the container block, eg. bg-container, add this CSS:
.bg-container.gb-container {
overflow: visible;
}
.bg-container.gb-container:before {
top: -200px;
}
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
You can play around with topvalue and it's better to add a top margin for the bg-container, so that the bg image won't overlap the content above thebg-contaienr.
Thanks. Solved!
You are welcome :)