JQuery Mobile: Custom Header w / background image + navbar

Question

Poorly struggling with this all day, and I feel that someone who has more knowledge on the topic can save me a lot of grief ...

I created a website using jQuery Mobile and I want to use a custom image / logo instead of the standard title on all my pages. What makes it somewhat more complicated is that I also use the navigation bar only under a custom title / image for navigation. See below the image I'm talking about:

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

So, this is where I run into problems ... Scaling a custom image / header gives me nightmares. At a certain resolution (for example, predefined 480x800 in Dreamweaver) everything looks fine. However, I begin to run into problems when resolution increases:

First, the height of the image continues to increase, making the overall title (image and navigator) much larger than I want. Secondly, if you use a display with a very high resolution that exceeds the total width of the image, the image just stops at its maximum width, while the navigation bar (and the rest of the page) continues to expand to 100% of the page width - which obviously looks very weird.

I use the following / setup files:

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 tried a million different CSS variations in the above files along with html on the page with no luck. I have a feeling that it will include media queries with 3 or 4 different versions of the image, but despite all my efforts, I could not find a better way to do this.

My ideal scenario is a related background image + a navigation combination (or something similar) that works well on all popular mobile devices in both portrait and landscape modes.

Any advice would be appreciated ...

Answer 1

This is not 100%, but hopefully it gives you an idea of ​​what CSS can do using only the logo and not the background:

and then using CSS to create the top and bottom layers

Example:

• http://jsfiddle.net/PMhXe/

CSS

.bgimg { background-image: url(http://dummyimage.com/5x5/a80c10/ffffff.png), url(http://dummyimage.com/5x5/a80c10/ffffff.png); background-repeat:repeat-x; background-position:100% 120px, 100% -120px; background-size:100% 180px; } .logo-font { font-size:x-large; font-weight:bold; } 

HTML:

 <div data-role="page" class="type-home"> <div data-role="header" class="bgimg"> <h1><img src="http://www.albionroad.com/images/stories/logos/manchester-united-logo-1.png" alt="logo" /><br /><div class="logo-font">MANCHESTER UNITED<br />&lt;&nbsp;&middot;&nbsp;&gt;</div></h1> <div data-role="navbar"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> </ul> </div><!-- /navbar --> </div><!-- /header --> </div>​ 

Answer 2

You have something like this for the jQuery mobile app title, where your logo image will be displayed:

 <div data-id="header" data-position="fixed" data-theme="c" data-role="header" role="banner" class="header-manU ui-header ui-bar-c ui-header-fixed slidedown"> <h1 class="manU-logo ui-title" role="heading" aria-level="1"> <a href="#" class="ui-link"> <img src="css/themes/default/images/logo_header.png"> </a> </h1> </div> 

just apply this css:

 .ui-mobile .header-manU a img { width: 100%; } 

Hope this helps