Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to add background images using css in phonegap

Tags:

html

css

cordova

I am making a tab for mobile device in phonegap. I want to add image as background for the tabs. The problem is that it does not add any background image. here is my directory structure

images are in this folder

www/img/tabs.png

In css below I am using path to images like this url(./img/tabs.png) top left no-repeat; which does not work. here is are my css files

www/stylesheet/css/frames/footer.css

here is are all of my pages located

www/pages/home.html

and here is my css

footer {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 48px;
    padding: 0;
    background: #535353; 
}

footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none; 
}

footer ul li {
    float: left;
    padding: 5% 10.9%;
    background: url(./img/tabs.png) top left no-repeat; 
}

footer ul li a {
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none; 
}

footer ul li a .current {
    background: url(./img/tabs.png) bottom left no-repeat; 
}

here is my html

<header>
    Header
</header>
<section id="wrapper">
    <div id="scroll-content">

    </div>
</section>
<footer>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Photo</a></li>
    </ul>
</footer>
like image 212
Om3ga Avatar asked Sep 20 '12 07:09

Om3ga


1 Answers

Your image url is not ok.

In fact, the url you provide to the path of your image should be related to the location of your CSS file.

So, you need to use:

url(../../../img/tabs.png)

instead of:

url(./img/tabs.png)

Have a try and let me know if this works

like image 170
Littm Avatar answered Sep 28 '22 16:09

Littm