How to center a div when page is resized (center crop)

[JamesDaly]

Hey guys,

I’m wondering how I can keep this hero image centred when the page is resized.

Right now it crops the right, keeping the left side visible, and I am wanting to keep the circle element in the middle, with both left and right sides being cropped equally.

The image is set to be the background of the container div.

Thanks so very much in advance

Live site: jamesdaly.webflow.com

---

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

[dram (Alex Dram)]

1. Container - set to flex, vertical, align:center. overflow:hidden
2. hero-image-bg-container - flex item: override alignment: align self: center, remove “center element” (both margins 0)

Done. Now you will have to tweak the animation elements around the main image but the back is fixed in the center now.

edit: allow me to compliment your illustration while I am at it!

[JamesDaly]

Dram you’re AMAZING, thank you so much Been trying to work that out for days, really appreciate you taking the time to help

And thanks heaps man! Thought I’d check out what IX 2.0 can do with one of my illustrations, thanks for the compliment. Once this site is finished I’ll have a home for all future illustrations

[dram (Alex Dram)]

Glad to help. Webflow is actually way less intimidating after some practice. Flexbox for one thing solved 99% of problems with layout positioning for me at once.

You’ll get it finished, I am sure of that