How to customize data-role=header in jquery mobile with phonegap?

Question

I have to customize header part with custom image background and buttons I have tried by overriding its ".ui-header" but isn't work properly..
So How can I Solve this problem ?

<div data-role="page" id="categories" data-title="categories" data-theme="b">
<div data-role="header">
    <!-- Header Content -->
</div>

<div data-role="content">
    <!-- Content -->
</div>

<div data-role="footer">
    <!-- Footer Content -->
</div>
</div>

Answer 1

If you want to do this without an id you can do it like this:

.ui-page-theme-a .ui-header.ui-bar-inherit {
    <css here>
}

This works with jqm 1.4 and above. Note, if you are using a different page theme (b) or maybe a custom one you need to change the -a part.

Answer 2

Header gets a class of ui-header and ui-bar-a, so overriding ui-header won't work. An easier way is to give your header div an ID and then set the background image in CSS:

<div data-role="header" id="customHeader">
    <h1>My Custom Header</h1>
</div>

#customHeader {
     background-image: url('http://www.therabreath.com/images/emails/optin/stripes.jpg');
}

Here is a DEMO