Layering images on top of each other

hi there. has anyone any ideas how I can keep these images on in the same place when resizing without just making it one big image. I have tried using %, VH and VW and I have emailed web flow who haven’t got back to me, which is really bad customer service, can anyone please help?? you would be a huge life saver. here is my site for a quick look. as you see I haven’t even got passed the hero section yet.

I do like web flow but with this huge issue and the lack of customer service, I’m genuinely thinking of going back to word press

thanks for any help you can offer

https://preview.webflow.com/preview/mun-test?utm_source=mun-test&preview=f54fbe86f12764967d664e9682588f35


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Hey @Hobbitrock83 posting here on the forum is definitely the right place to get design advice. It is possible to overlay two images or any two elements.

  1. Set the parent div to position:relative

28%20PM

  1. On the image to be overlaid set it to position:fixed and adjust the positioning from the top and/or sides

  1. Here is the result

Just keep in mind that the first image is what is defining the dimensions of the containing div that the other layer(s) are positioned from.

Hope that helps. Happy designing!

3 Likes

thanks for the reply that certainly does help however I’m still having images when I resize. is there any way I can add page breaks for different resizes?? because its fine when I click on the other phone icon etc but when I stretch it out for other phone sizes it goes all messed up again??

thanks again Matthew. I really do appreciate your help

I’d suggest using absolute dimensions for the containing div and then use relative dimensions for the layered images. This way when the containing div size is adjusted for different breakpoints the images will retain their size/position in relationship to the container. These resources might help you understand layout, position, and responsive design in Webflow.

1 Like

I have layering stuff on the first image here, mouseover the three sections:

Facilities – Parc Esta

2 Likes

Hi Sam,

How did you make the links load images on under the map on your site?

Cheers!

Do you have updated instructions for this as I don’t see the option that Position option the red arrow is pointing to.

2 Likes

I’m a new user for Webflow and in the middle of learning all the tricks. I did discover this one, about how to layer objects using Grid.
Add a Grid, add some contents to various cells, then edit the Grid Child Style properties, set the position to manual, and then specify the which columns and rows the content should cover. Search for topic “Overlap content in a responsive grid” in the Webflow University docs.