[Resolved] Overlap Image on Container

[Thushara]

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

[Ying]

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.

[Thushara]

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

[Ying]

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.

[Thushara]

Thanks. Solved!

[Ying]

You are welcome 🙂

[Author]

Posts