What's the best way to add background images so that they are responsive across different devices

I have a 1440751 px background image for my hero section and the image looks weird when it is cut off at different parts. How do I integrate this image so that the edges of the image adjust as the size of the screen changes. For instance, if the screen changed to 800600, I would also like the image to change to 800*600. Is this possible?

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