How to add background images using css in phonegap

Question

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

images are in this folder

www/img/tabs.png 

In css below, I use an image path like this url (./img/tabs.png) top left no-repeat; which does not work. here are my css files

 www/stylesheet/css/frames/footer.css 

here are all 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> 

Answer 1

Your url image is out of order.

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

So you need to use:

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

instead:

url(./img/tabs.png)

Try it and let me know if this works.