Question

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 following 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

Answer 1

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.

Answer 2

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.

友情链接