Background and images alignment in different screen sizes

Hi guys!
I am a beginner with Webflow, I began to learn how to use it as I was building my website.
I’m having a problem though that I can’t figure out how to solve it.
On the home page of my website I have a"room" background and on it I’ve put pictures on the walls that I had to upload as independent divs because I need them to be animated and clickable. The problem is that with screen changes the room and the pictures are not aligned anymore, I need the background and the pictures together to expand and minimize accordingly.
please take a look at my website and the read-only link.
also attached pictures of the homepage in different screen sizes.



Here is my site Read-Only 1: Webflow - Hiba Banna

And my preview published website 2:https://www.hibann.design/

Hi Hiba!

I would suggest using percentages, rather than pixel-based values for the positioning of each div that contains an image. The percentage for positioning is based on the width of the parent div for left and right values, and on the height of the parent div for top and bottom values. The parent div will be indicated here, at the bottom in the “relative to” section:
image

In your case, your parent div is currently “Room” as that is set to relative (a parent div must be set to something other than static in order for the child div to use those dimensions for positioning reference). If the div isn’t set to relative, the “parent” will become the next div up in the hierarchy that is set to anything other than static.

Also, I would suggest changing the cursor for your pictures to pointer, to indicate they are clickable links – it’s not immediately obvious that you are meant to click them :slight_smile:

Great site, by the way! It’s super creative!

2 Likes

@emary Thank you so much! I’ll try that and let you know if it worked :slight_smile:

1 Like