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

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