I am facing an issue with resizing window size. The image on the page is not scaling along with it and I don't want the image to distort when I resize the window. My goal is to keep the center of the image always in the middle of the window. On smaller devices like phones, I only want to display the center logo without showing the blue and red parts of the image until the window is maximized to show the full hero image. Can someone guide me on how to achieve this? I couldn't find relevant documentation about this in Bootstrap.