Struggling badly with this all day and I get the feeling somebody with more knowledge on subject could save me a lot of grief...

I have created a website using Jquery Mobile and I want to use a custom image/logo instead of the standard header on all of my pages. What makes it slightly more complicated is that I am also using a navbar just under the custom header/image for navigation. See the below image for what I am talking about:

http://postimage.org/image/ywh1wajjr/

So here is where I am running into issues... The scaling of the custom image/header is giving me nightmares. At a certain resolution (e.g the 480x800 preset in Dreamweaver) everything looks fine. However, I start to run into issues when the resolution increases:

Firstly, the image height keeps getting bigger, making the overall header (image and navbar) a lot bigger than I want it to be. Secondly, if you are using a very high resolution display which exceeds the total width of the image, the image just stops at its max width, while the navbar (and the rest of the page) continues to expand to 100% the width of the page - which obviously looks very odd.

I am using the following files/setup:

jquery-1.8.2.min.js, jquery.mobile.structure-1.2.0.css, jquery.mobile.theme-1.2.0.css, jquery-1.8.2.min.js, jquery.mobile-1.2.0.js and Dreamweaver cs6.

I have tried a million different variations to the CSS in the above files along with the html in the page with no luck. I have a feeling its going to involve media queries, with 3 or 4 different versions of the image, but despite my best efforts, I havnt been able to figure out the best way to do it.

My ideal scenario - The linked background image + navbar combo (or something similar) that works well on all popular mobile devices in both portrait and landscape mode.

Any advice would be appreciated...