Need Help with Webflow Hero Section Background Image Responsiveness

Design help General
1

Hello community!

I’m a webflow student, and I must admit, I’m feeling quite frustrated with the test page I’m creating to learn. It’s making me want to throw in the towel! :sweat:

The issue at hand involves a background image I’ve designed in Figma for the hero section of my web. When I try to resize the window, the image also scales down. However, I want the text to remain in the same position as it is on a larger screen to align with the arrow design, and I just can’t seem to make it work! :weary:

I’ve spent countless hours trying to figure this out, and I’ve attached a video to help illustrate the problem. If anyone could offer some guidance or solutions, I would be incredibly grateful!

Thank you so much in advance for your help! :pray:

Here is my site Read-Only: Webflow - Alvaro's Five-Star Site

2

I think your best bet would be to:

  1. Reexport your background image without the arrow design that you want aligned to the title.
  2. Export the arrow design as its own image.
  3. Wrap the title and the arrow design in a div and position the div as Relative and the arrow design as absolute.
  4. You’ll have to adjust the arrow design sizing and positioning so that it’s aligned how you want it across the breakpoints.

In fact it might be better to export each of these arrows and the photo as their own image and position them absolutely so that way as the screen gets smaller you can adjust their position or even hide them from view if you want to.

3

Thank you very much for your inputs!
I will try as you said

Thanks again