What's the best way to have headings stay in the same spot on an image despite browser size

Design help General
1

Hi there!

I have a question I hope someone can help me with: I have an image that will be 100vw and 100vh as a hero section. There are 4 buildings in this images (besides many other) but I want to highlight these 4 specific buildings. For now I used absolute positioning for these 4 headings on the image and tried to play around with margins in % and vw / vh, so that these four headings always stay in the spot (pointing to the right building) despite the size of the browser window. However, so far I didn’t get the perfect values to achieve this. Depending on the size of the browser, at some point the headings will be slightly miss-positioned and no longer pointing to the right building.

Unfortunately I cannot share the read only link bc the image is from the client and it can’t be shared yet. I hope though someone can still help!

FIY: the reason why I want to use Webflow headings (instead of adding the headings in photoshop to the actual image) is that I want these 4 headings to ‘pop up’ /fade in as an effect when someone opens the website.

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

2

Don’t use 100vw for the image wisth, make it 100% inside of its hero container, and make the container 100% width too, NOT 100vw as you’ll run into an unwanted sliding bug and horizontal slider.

if it’s just one image, quickly draw a layer over it representing the building, swap with the original image and share the link, your question is typically one that requires a design solution. Solution may not be exactly what you’re expecting, but maybe another way to build the hero (most probably). So sharing your link is quite required to really understand and find a solution.

And you’re very right. Baking text in an image is a big fail for SEO and accessibility, you probably want search engines to read those headings.

1 Like
3

Hi @Vincent,

thanks for replying! Changing the image’s and the container’s width to % instead of vw didn’t really do anything. Since the website contains lots of information that I cannot share publicly, I duplicated my project, deleted all sections despite hero and 2nd section and replaced the image with a plain image that shows the buildings as blocks, see here: https://preview.webflow.com/preview/upper-duex-6a45c101180b4fc1b3920695c5a8?utm_medium=preview_link&utm_source=designer&utm_content=upper-duex-6a45c101180b4fc1b3920695c5a8&preview=bd3e386d307c6add3b1c0b9b141092f0&mode=preview

It’s the 3 dark purple blocks, and the one lighter purple, that is basically the same building but the ground floor of that 3rd building.

It seem to be mainly the height that is still messing up the design. The headings stay horizontally in place but when I change the width of the browser, the headings changes their heights so that they no longer point to the right building. Especially for the two smaller buildings

Appreciate your help!