Best practice for managing floating illustrations

Hello everyone,

I’m building out my first project in Webflow and am getting stuck on the best way to handle some floating illustrations within my design.

I have a Section that includes illustrations on the left and right - with header text centered in the middle.

I’m curious what the best practice is for handling this type of design to ensure it works properly at all responsive breakpoints.

Is it best to make this a background image, an image object with absolute positioning, or to split the illustrations into “left” and “right” images and then do a 3 column layout (with text being in the middle column).

I feel like I’ve tried all of these options and can’t seem to get it working just the way I want. It looks ok at certain resolutions but then not so great as you resize the browser.

Any help/guidance on how to hack through this would be appreciated.

Thanks…

Here is an image from the design spec I’m trying to bring to life:


Here is my site Read-Only: https://preview.webflow.com/preview/cjm-scratchpad?utm_source=cjm-scratchpad&preview=4ee0fb3ea41c35786b8d8f6693fe5a7d
(how to share your site Read-Only link)

I’ve been struggling with the same problem. How do we deal with floating illustrations :frowning: