How to position large fixed image a la stripe.com homepage

Design help General
1

I am trying to achieve this

1281×797 60.2 KB

But am struggling with how to position the image. It needs to flow over the section below it, be able to have the header text flow over it and lastly stay in it’s location and flow ‘outside’ the section it is in so when the screensize is resized larger than 1280 the image can be fully seen. Similar to https://stripe.com/gb

I have achieved 2 of the above using absolute positioning, but can’t figure out how to ‘lock’ the image’s position and not move to the right as the screensize is increased.

https://preview.webflow.com/preview/eventhalo?preview=fd8aee7a43011f7aaf1934f942b9bbc0

2

The best way I can think to do this is to set the parent section to relative and then set the image to absolute. That way the image is not absolute to the body, but to it’s parent container. Seems you have figured out another workaround using columns though.

3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.