AppMobi background issues

basically I am trying to set a background color (or image). I am writing in HTML CSS and JQuery Mobile.

I'm trying to create a basic AppMobi app but I don't seem to be able to change my background in the follo开发者_C百科wing example:

    <div data-role="page" id="page">
    <div data-role="header" data-theme="c">
        <h1>Page One</h1>
    </div>
    <div data-role="content" data-theme="c">    
        <ul data-role="listview" data-theme="b">
            <li><a href="#page2">Page Two</a></li>
            <li><a href="#page3">Page Three</a></li>
            <li><a href="#page4">Page Four</a></li>
            <li><a href="#page3" data-role="button" data-icon="delete">Delete</a></li>
        </ul>       
    </div>
    <div data-role="footer" style="position:fixed; bottom:0;" data-theme="c">
        <h4>Page Footer</h4>
    </div>
</div>

I have tried to both change the background in HTML and CSS, but I don't seem to be able to change the background color page 1 (example). Page 1 includes 4 buttons, and a "sticky footer". The buttons shown on top of screen, but the content between buttons or lists and footer will not change color. I tried writing HTML or CSS in Header and also inline.

How would I be able to change the background color of this 'div' chunk?

Thanx in advance

Your issue isn't related to AppMobi, but JQuery Mobile in general.

The way JQuery Mobile works is it loads the content, then "processes" it and applies styles. What's happening is that JQuery Mobile is overriding your default CSS styles. Open up the JQuery Mobile CSS file and change it there.

In standard sample apps, here is the block of code in index.html that sets your background.

/* Set up the page with a default background image */
    body {
        background-color:#fff;
        color:#000;
        font-family:Arial;
        font-size:48pt;
        margin:0px;padding:0px;
        background-image:url('images/background.jpg');
    }

Which you can see just sets the image titled background.jpg, located in the images directory. You can either edit that background image, get a new one and point to that, or put in some nifty webkit code or something: (head tag of index.html)

<style type="text/css">
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 8); }
        input, textarea  { -webkit-user-select:text; } 
        body  
        {
            font-family:Arial;font-size:24pt;font-weight:bold;  
            background: 
            -webkit-gradient(radial, 50% 60%, 0, 53% 50%, 50, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.15)), to(rgba(255,255,255,0))),
            -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))),
            -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 200, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))),
            -webkit-gradient(radial, 40% 50%, 0, 40% 55%, 25, from(rgba(255,255,255,0)), color-stop(99%,rgba(255,255,255,.1)), to(rgba(255,255,255,0))),
            -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8D4212), to(#28580C), color-stop(.5,#DA881B));
            background-size: 400px 400px, 470px 470px, 600px 600px, 300px 300px, 100% 100%;
            background-color: #28580C;
        }
    </style>

So you should be able to give your Page 1 div an id, and just apply either the image or whatever else you want to that div id.