Streaming live at 10am (PST)

Layering images on top of each other


#1

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)


#2

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

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


#4

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.


#5

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

http://parc-esta.webflow.io/facilities