www.wysiwygwebbuilder.com

How to do a layering of images in Layout grid or flexbox for example



The man laying on the sofa is one image the half cut solid nevy blue solid background on top is another image png or svg. And then on top of those we can see the text and button.
The reason wanting to layer those images is because I would like to adjust them even in breakpoints so instead of everything in the middle in mobile device the viewport shows only the man and not the solid nevy blue background which I would be able to remove in breakpoints.

So the task is how to do it...

I did something similar using an image within a layer

https://www.theharbourfishandgrill.com/

zinc wrote: Mon Jul 04, 2022 10:21 am I did something similar using an image within a layer

https://www.theharbourfishandgrill.com/

It required custom code or was it possible with wwb built in features?

I am experimenting this kind of styling today so thought if any one did so before.

Can't you just use a background image?
For the 'overlay' you can use a shape divider.

wwonderfull wrote: Mon Jul 04, 2022 10:27 am

zinc wrote: Mon Jul 04, 2022 10:21 am I did something similar using an image within a layer

https://www.theharbourfishandgrill.com/

It required custom code or was it possible with wwb built in features?

I am experimenting this kind of styling today so thought if any one did so before.

An image that was placed inside the layer. Simple as that.

zinc wrote: Mon Jul 04, 2022 11:42 am

wwonderfull wrote: Mon Jul 04, 2022 10:27 am

zinc wrote: Mon Jul 04, 2022 10:21 am I did something similar using an image within a layer

https://www.theharbourfishandgrill.com/

It required custom code or was it possible with wwb built in features?

I am experimenting this kind of styling today so thought if any one did so before.

An image that was placed inside the layer. Simple as that.

I could do it in layer for sure but how about in a flex grid or layout grid any tricks kindly suggestful.

Did you try Pablo's suggestion?

Pablo wrote: Mon Jul 04, 2022 11:23 am Can't you just use a background image?
For the 'overlay' you can use a shape divider.

That may work I will try that and see.

I put together a quick demo using a layout grid here.

demo

I did not optimize it for a bunch of breakpoints in the demo but you could tweak it in such a way to get the text to look correctly for different breakpoints.

crispy68 wrote: Mon Jul 04, 2022 4:31 pm I put together a quick demo using a layout grid here.

demo

I did not optimize it for a bunch of breakpoints in the demo but you could tweak it in such a way to get the text to look correctly for different breakpoints.

Well done crispy!!!!

crispy68 wrote: Mon Jul 04, 2022 4:31 pm I put together a quick demo using a layout grid here.

demo

I did not optimize it for a bunch of breakpoints in the demo but you could tweak it in such a way to get the text to look correctly for different breakpoints.

I was in the same process
understood how you did it crispy the layout grid had the background and the col1 had the solid one. I think you had used fixed width for col1?
Btw thanks for the demo.

understood how you did it crispy the layout grid had the background and the col1 had the solid one.

Yes, that is correct. I also set the background image size to 300% (just type 300% in the size box) since it is a svg.

I think you had used fixed width for col1?

It is only 1 size in the demo as I didn't add a bunch of breakpoints. I probably wouldn't make it a "fixed" size as you may need to adjust that column for smaller screens as it also controls the width of the text. I also added some interior padding to that column to move the text over.