Question

I am using jquery mobile.
I have created a very simple page where there is a fixed header and footer.I have only two buttons at that page.as footer is fixed to bottom so half of the page is in silver color(data-theme=c) and half as gray color(bottom page).

I want my full page to be in silver color(according to specified theme) from header to footer no matter how much content I want to place on one page.
Is it possible?

<div data-role="page" data-theme="b" id="ui-page-start" class="ui-page-active">
    <div data-role="header" data-theme="b" data-backbtn="false">
        </div>

    <div data-role="content" class="ui-content" role="main" style="text-align: center;"data-theme="c"> 
    <br/>
    <div>
        <input type='text' id='jid' placeholder="JID" data-mini="true" value='[e-mail]' style="border-radius: 10px;">

        <input type='password' data-mini="true" id='password' placeholder="Password"style="border-radius: 10px;">
        </div>                  

    </div>
    <div data-role="footer" data-position="fixed" class="ui-bar-a fade " role="contentinfo" style=": 212px; ">
        </div>

</div>

Answer 1

I do this using CSS to remove the background from the data-role="content" div, and applying it instead to the data-role="page" div. Here is a jsbin showing it in action:

http://jsbin.com/ijeqiy/2/

You can target individual themes by using the .ui-body- class. For example in your code, you are using theme b on your page div, so you can overwrite it like so:

.ui-body-b {    
    background: #F9F9F9; /* the background color you want */
}

.ui-content {
    background: none; /* remove the background color from the content because it's not long enough */
}