Container Alignment To Specific Part Of Stretched Image (organic)

Just wondering if anyone has ever tried or even if it is possible to align elements to internal spots of an image?

(Mostly trying to understand how Editor X resizes images when fully stretched or given 100% values on either X/Y axis)

Example (see attached): I’ve got an image with a frame in the centre (included in the single image) where I want to place my responsive element (container) to follow responsively as the image resizes.

  • I could add the blue frame as a different img element however I won’t be able to align the blur effect behind it from the animated characters (not to mention that this was being planned on being a video)
  • The container is needed for placing text inside and alignment is needed.

Cheers in advances mates for reading.

  1. I’m able to achieve horizontal alignment when setting up a grid within section with outer columns/rows given a viewport height/width. Depending on the size of the image it varies.

For instance:

  1. When height of image is let auto where width is 100% I get height alignment with container while resizing viewport

  1. When adjusting section to required height and having 100% width & height on image (basically stretched), i do achieve vertical alignment.

I tried setting something in between those values but there’s no sweet spot obviously since this is meant to be responsive. Giving the image a fixed pixel height does not work either.

I’ll probably end up adding the middle image part as a secondary element stretched inside a container in the end but asking in case someone knows so I can retain the blurry effect behind it (rather than just opacity effect)

Actually may have a solution here again:

  • No grids needed, just the container floating in the middle with Viewport width values on height & width.

Seems to be responsive on my larger desktop view. Some trialling and image resizing will be needed as after a while it seems to crop if height is fixed.

Will check smaller viewports later on as I’m working on some other thingos atm.