How to Image resize but have it stop at a certain point in CSS?

[smartsuit]

Can visit my website here to see what I am talking about and see the css and html code, http://www.orthuscreative.com/resize/ basically I need that image to resize automatically when the browser window gets smaller, which it does, but only once the image reaches the left side of the browser does it then start to resize. What I want to have happen is: I want it so when the user resizes the browser window, when the image reaches the "menu will go here" area, it then stops moving and gets stuck at the right most edge of the menu, instead of continuing on to the left side of the browser window. As if it's a solid object / there is a wall at the menu to prevent it from moving further. Then once it has stopped on the right edge of the menu, it then starts to resize.So basically I want the same functionality that it's doing right now when it reaches the left side of the browser window, except I want it to stop at the menu and then resize instead of going to the left side of the browser, as if the menu is a solid object preventing it from moving further left, but yet once it reaches the menu and stops, I want it to keep resizing.Is it possible? I've tried numerous things, and just stuck right now.Thanks!