Image Layering on Grid

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
wwonderfull
 
 
Posts: 1276
Joined: Fri Aug 21, 2020 8:27 am

Image Layering on Grid

Post by wwonderfull »

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

Image

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...
Last edited by wwonderfull on Mon Jul 04, 2022 10:28 am, edited 2 times in total.
User avatar
zinc
 
 
Posts: 2150
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: Image Layering on Grid

Post by zinc »

I did something similar using an image within a layer

https://www.theharbourfishandgrill.com/
Running WYSIWYG Web Builder since 2007...
wwonderfull
 
 
Posts: 1276
Joined: Fri Aug 21, 2020 8:27 am

Re: Image Layering on Grid

Post by wwonderfull »

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.
User avatar
Pablo
 
Posts: 21708
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Image Layering on Grid

Post by Pablo »

Can't you just use a background image?
For the 'overlay' you can use a shape divider.
User avatar
zinc
 
 
Posts: 2150
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: Image Layering on Grid

Post by zinc »

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.
Running WYSIWYG Web Builder since 2007...
wwonderfull
 
 
Posts: 1276
Joined: Fri Aug 21, 2020 8:27 am

Re: Image Layering on Grid

Post by wwonderfull »

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.
User avatar
zinc
 
 
Posts: 2150
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: Image Layering on Grid

Post by zinc »

Did you try Pablo's suggestion?
Running WYSIWYG Web Builder since 2007...
wwonderfull
 
 
Posts: 1276
Joined: Fri Aug 21, 2020 8:27 am

Re: Image Layering on Grid

Post by wwonderfull »

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.
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Image Layering on Grid

Post by crispy68 »

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.
User avatar
zinc
 
 
Posts: 2150
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: Image Layering on Grid

Post by zinc »

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!!!! :D
Running WYSIWYG Web Builder since 2007...
wwonderfull
 
 
Posts: 1276
Joined: Fri Aug 21, 2020 8:27 am

Re: Image Layering on Grid

Post by wwonderfull »

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 :D
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.
User avatar
crispy68
 
 
Posts: 2749
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Image Layering on Grid

Post by crispy68 »

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.
Post Reply